From 7c2598f7303978836da0cc6e0752976f6475edc6 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Thu, 5 Feb 2026 16:55:56 +0700 Subject: [PATCH] feat: Enhance component extraction logic and update tPOS UI kit with new badge and button designs for improved reusability and consistency. --- pencil-design/scripts/build.py | 41 +- pencil-design/src/components/tPOS-ui-kit.pen | 7936 ++++++++---------- 2 files changed, 3685 insertions(+), 4292 deletions(-) diff --git a/pencil-design/scripts/build.py b/pencil-design/scripts/build.py index db06391f..39238d06 100755 --- a/pencil-design/scripts/build.py +++ b/pencil-design/scripts/build.py @@ -314,24 +314,35 @@ class PencilBuilder: gathered.append(child) continue - # 2. Check if it's a structural wrapper (Showcase, Section) + # 2. Check if it's a structural wrapper (Showcase, Section, Examples, Row) name = child.get('name', '') is_frame = child.get('type') == 'frame' - is_structural = 'showcase' in name.lower() or 'section' in name.lower() + is_structural = any(kw in name.lower() for kw in ['showcase', 'section', 'examples', 'row', 'header', 'container']) if is_frame and is_structural: - # Unwrap and recurse + # Unwrap structural frames and recurse to find reusable components inside self._extract_components_recursive(child.get('children', []), gathered) elif is_frame: - # 3. Valid Candidate (Frame that isn't structural/showcase) - # It might be a group of buttons (e.g. "buttonExamples") or an actual component candidate - # For now, we keep it as a potential component - gathered.append(child) - else: - # 4. Primitives (Text, Rect, etc.) at this level - # If they are loose in a Showcase, we probably ignore them (decorations like Titles) - # If they are inside a Kept Frame, they were preserved in step 3. - pass + # Non-structural frame without reusable flag + # Check if it has nested reusable components inside + nested_reusables = [] + self._find_nested_reusables(child.get('children', []), nested_reusables) + + if nested_reusables: + # Has nested reusables, extract them instead of the wrapper + gathered.extend(nested_reusables) + else: + # No nested reusables, keep this frame as potential component + gathered.append(child) + # Primitives are ignored at extraction level + + def _find_nested_reusables(self, children: List[Dict], found: List[Dict]) -> None: + """Find all nested reusable components""" + for child in children: + if child.get('reusable'): + found.append(child) + elif child.get('type') == 'frame': + self._find_nested_reusables(child.get('children', []), found) def build_library(self, output_path: str = None) -> None: """Build merged component library from Atomic Design files""" @@ -368,6 +379,12 @@ class PencilBuilder: with open(pen_file, 'r') as f: data = json.load(f) + # Merge variables from source file (won't override existing tokens) + file_vars = data.get('variables', {}) + for key, val in file_vars.items(): + if key not in variables: + variables[key] = val + # Use recursive extraction file_components = [] self._extract_components_recursive(data.get('children', []), file_components) diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index 40d9e65d..bed101f8 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -36,99 +36,57 @@ }, { "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", + "id": "Badge2", + "name": "exampleHeroBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "gap": 8, + "padding": [ + 8, + 16 + ], "alignItems": "center", "children": [ { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] + "type": "ellipse", + "id": "j3ksJ", + "name": "heroBadgeDot", + "fill": "$orange-primary", + "width": 8, + "height": 8 }, { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, + "type": "text", + "id": "zzm6Q", + "name": "heroBadgeText", + "fill": "$orange-primary", + "content": "Hero Badge with Dot", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Badge3", + "name": "exampleChip", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] + "type": "text", + "id": "Rb7IM", + "name": "chipText", + "fill": "$text-secondary", + "content": "Chip Label", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" } ] }, @@ -158,207 +116,110 @@ }, { "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "id": "PrimaryBtn1", + "name": "examplePrimaryBtn", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] }, - "gap": 20, - "padding": 40, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], "justifyContent": "center", "alignItems": "center", "children": [ { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] + "type": "icon_font", + "id": "xMjoJ", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" }, { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] + "type": "text", + "id": "yR7mY", + "name": "btnPText", + "fill": "$text-primary", + "content": "Primary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PrimaryBtn2", + "name": "examplePrimaryBtnIcon", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qkXav", + "name": "btnPIcon", + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" }, { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] + "type": "text", + "id": "nrUMI", + "name": "btnPText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" } ] }, @@ -388,171 +249,153 @@ }, { "type": "frame", - "id": "NumpadExamples", - "name": "numpadKeyExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "NumKey1", + "name": "Atom/NumpadKey/Standard", + "reusable": true, + "width": 64, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default" }, - "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": "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": "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": "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": "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": "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": "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": "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 }, - { - "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 - } - ] + "colors": [ + { + "color": "#FF5C00", + "position": 0 }, - "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" - } - ] + { + "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" } ] }, @@ -582,192 +425,165 @@ }, { "type": "frame", - "id": "QtyExamples", - "name": "quantityControlExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "QtyToggle1", + "name": "Atom/QuantityToggle", + "reusable": true, + "fill": "$bg-elevated", + "cornerRadius": 10, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default" }, - "gap": 32, - "padding": 40, - "justifyContent": "center", + "gap": 0, "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, + "id": "QtyMinus", + "name": "minusBtn", + "width": 48, + "height": 48, + "justifyContent": "center", "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": "icon_font", + "id": "QtyMinusIcon", + "name": "icon", + "width": 20, + "height": 20, + "iconFontName": "minus", + "iconFontFamily": "lucide", + "fill": "$text-secondary" } ] }, { "type": "frame", - "id": "StatusGroup", - "name": "statusIndicatorExamples", - "gap": 24, + "id": "QtyValue", + "name": "valueDisplay", + "width": 56, + "height": 48, + "fill": "$bg-surface", + "justifyContent": "center", "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": "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": "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" } ] }, @@ -797,155 +613,53 @@ }, { "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, + "id": "LogoEx", + "name": "exampleLogo", + "gap": 8, + "alignItems": "center", "children": [ { - "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] + "type": "ellipse", + "id": "8osja", + "name": "logoDot", + "fill": "$orange-primary", + "width": 10, + "height": 10 }, { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ivisG", - "name": "shTitle", - "fill": "$text-primary", - "content": "Section Header Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YFM0A", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "This is a reusable section header with badge, title, and description.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, + "type": "text", + "id": "7V59t", + "name": "logoText", + "fill": "$text-primary", + "content": "aPOS", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "600", + "letterSpacing": 3 + } + ] + }, + { + "type": "frame", + "id": "n6zyD", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ { - "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", - "width": "fill_container", - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "mrU8q", + "name": "badgeText", + "fill": "$orange-primary", + "content": "CATEGORY", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 } ] }, @@ -1105,106 +819,97 @@ }, { "type": "frame", - "id": "ModeIndicators", - "name": "modeIndicatorsRow", - "layout": "horizontal", - "gap": 16, + "id": "ModeIndRestaurant", + "name": "Molecule/ModeIndicator/Restaurant", + "reusable": true, + "width": 32, + "height": 32, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "fill": "$orange-primary", + "cornerRadius": 9999, "children": [ { - "type": "frame", - "id": "ModeIndRestaurant", - "name": "Molecule/ModeIndicator/Restaurant", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$orange-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIRestIcon", - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, + "type": "icon_font", + "id": "MIRestIcon", + "iconFontName": "utensils", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "ModeIndBar", + "name": "Molecule/ModeIndicator/Bar", + "reusable": true, + "width": 32, + "height": 32, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "fill": "$bar-primary", + "cornerRadius": 9999, + "children": [ { - "type": "frame", - "id": "ModeIndBar", - "name": "Molecule/ModeIndicator/Bar", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$bar-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIBarIcon", - "iconFontName": "wine", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, + "type": "icon_font", + "id": "MIBarIcon", + "iconFontName": "wine", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "ModeIndKaraoke", + "name": "Molecule/ModeIndicator/Karaoke", + "reusable": true, + "width": 32, + "height": 32, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "fill": "$karaoke-primary", + "cornerRadius": 9999, + "children": [ { - "type": "frame", - "id": "ModeIndKaraoke", - "name": "Molecule/ModeIndicator/Karaoke", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$karaoke-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIKarIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, + "type": "icon_font", + "id": "MIKarIcon", + "iconFontName": "mic", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "id": "ModeIndSpa", + "name": "Molecule/ModeIndicator/Spa", + "reusable": true, + "width": 32, + "height": 32, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "fill": "$spa-primary", + "cornerRadius": 9999, + "children": [ { - "type": "frame", - "id": "ModeIndSpa", - "name": "Molecule/ModeIndicator/Spa", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$spa-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MISpaIcon", - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] + "type": "icon_font", + "id": "MISpaIcon", + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" } ] }, @@ -1234,49 +939,135 @@ }, { "type": "frame", - "id": "OrderItemExamples", - "name": "orderItemExamples", + "id": "OrderItem1", + "name": "Molecule/OrderItem/Standard", + "reusable": true, "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "padding": [ + 16, + 20 + ], "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-subtle", + "sides": [ + "bottom" + ] }, - "layout": "vertical", - "gap": 0, - "padding": 0, + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "frame", - "id": "OrderItem1", - "name": "Molecule/OrderItem/Standard", - "reusable": true, + "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", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", - "id": "OrderItem1Left", + "id": "OrderItem2Left", "name": "leftContent", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", - "id": "OrderItem1Qty", + "id": "OrderItem2Qty", "name": "qtyBadge", "width": 32, "height": 32, @@ -1287,10 +1078,10 @@ "children": [ { "type": "text", - "id": "OrderItem1QtyText", + "id": "OrderItem2QtyText", "name": "qty", "fill": "$text-primary", - "content": "2", + "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" @@ -1298,42 +1089,23 @@ ] }, { - "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": "OrderItem2Name", + "name": "itemName", + "fill": "$text-primary", + "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" } ] }, { "type": "text", - "id": "OrderItem1Price", + "id": "OrderItem2Price", "name": "itemPrice", "fill": "$text-primary", - "content": "58,000\u20ab", + "content": "45,000\u20ab", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" @@ -1342,120 +1114,36 @@ }, { "type": "frame", - "id": "OrderItem2", - "name": "Molecule/OrderItem/WithModifiers", - "reusable": true, - "width": "fill_container", - "layout": "vertical", + "id": "OrderItem2Mods", + "name": "modifierList", "padding": [ - 16, - 20 + 0, + 0, + 0, + 44 ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 8, + "layout": "vertical", + "gap": 4, "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": "text", + "id": "OrderItem2Mod1", + "name": "modifier1", + "fill": "$text-tertiary", + "content": "+ Ph\u00f4 mai (+10,000\u20ab)", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" }, { - "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": "text", + "id": "OrderItem2Mod2", + "name": "modifier2", + "fill": "$text-tertiary", + "content": "+ Tr\u1ee9ng \u1ed1p la (+8,000\u20ab)", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" } ] } @@ -1487,170 +1175,153 @@ }, { "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, + "id": "BillSubtotal", + "name": "Molecule/BillRow/Subtotal", + "reusable": true, + "width": "fill_container", + "padding": [ + 8, + 0 + ], + "justifyContent": "space_between", + "alignItems": "center", "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": "text", + "id": "BillSubtotalLabel", + "name": "label", + "fill": "$text-secondary", + "content": "T\u1ea1m t\u00ednh", + "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": "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": "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": "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": "frame", - "id": "BillDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "margin": [ - 12, - 0 - ] + "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": "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": "text", + "id": "BillTotalValue", + "name": "value", + "fill": "$orange-primary", + "content": "100,116\u20ab", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" } ] }, @@ -1680,199 +1351,182 @@ }, { "type": "frame", - "id": "ProductCardExamples", - "name": "productCardExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "ProductCard1", + "name": "Molecule/ProductCard/POS", + "reusable": true, + "width": 140, + "fill": "$bg-elevated", + "cornerRadius": 12, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default" }, - "gap": 16, - "padding": 40, - "justifyContent": "center", + "layout": "vertical", + "clip": true, "children": [ { "type": "frame", - "id": "ProductCard1", - "name": "Molecule/ProductCard/POS", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, + "id": "ProductCard1Img", + "name": "productImage", + "width": "fill_container", + "height": 100, + "fill": "#3B82F618" + }, + { + "type": "frame", + "id": "ProductCard1Content", + "name": "content", + "width": "fill_container", "layout": "vertical", - "clip": true, + "gap": 4, + "padding": 12, "children": [ { - "type": "frame", - "id": "ProductCard1Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#3B82F618" + "type": "text", + "id": "ProductCard1Name", + "name": "productName", + "fill": "$text-primary", + "content": "C\u00e0 Ph\u00ea S\u1eefa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" }, { - "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": "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": "ProductCard2", - "name": "Molecule/ProductCard/POS/Selected", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, + "id": "ProductCard3Content", + "name": "content", + "width": "fill_container", "layout": "vertical", - "clip": true, + "gap": 4, + "padding": 12, "children": [ { - "type": "frame", - "id": "ProductCard2Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#22C55E18" + "type": "text", + "id": "ProductCard3Name", + "name": "productName", + "fill": "$text-disabled", + "content": "Sinh T\u1ed1 B\u01a1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" }, { - "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": "text", + "id": "ProductCard3Price", + "name": "productPrice", + "fill": "$text-disabled", + "content": "45,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" } ] } @@ -1904,393 +1558,321 @@ }, { "type": "frame", - "id": "CardGrid", - "name": "cardExamples", + "id": "FeatCard1", + "name": "exampleFeatureCard", "width": "fill_container", - "gap": 20, + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 16, + "padding": 28, "children": [ { "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, + "id": "HpzSJ", + "name": "fcIconBg", + "width": 48, + "height": 48, + "fill": "#FF5C0018", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, + "type": "icon_font", + "id": "suLNf", + "name": "fcIcon", + "width": 24, + "height": 24, + "iconFontName": "monitor-smartphone", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "text", + "id": "UJFMb", + "name": "fcTitle", + "fill": "$text-primary", + "content": "Feature Card", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "tDzj5", + "name": "fcDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "This is a feature card component used to showcase key features and capabilities.", + "lineHeight": 1.6, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "IndCard1", + "name": "exampleIndustryCard", + "clip": true, + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "FLdiF", + "name": "indImg", + "width": "fill_container", + "height": 200, + "fill": "#3B82F618" + }, + { + "type": "frame", + "id": "8ZFVY", + "name": "indContent", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": 24, + "children": [ { "type": "text", - "id": "UJFMb", - "name": "fcTitle", + "id": "8gWd8", + "name": "indTitle", "fill": "$text-primary", - "content": "Feature Card", + "content": "Industry Card", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600" }, { "type": "text", - "id": "tDzj5", - "name": "fcDesc", + "id": "1piNF", + "name": "indDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", + "content": "Industry-specific card with image, title, description and tags.", "lineHeight": 1.6, "fontFamily": "Roboto", - "fontSize": 14, + "fontSize": 13, "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" }, { "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, + "id": "h0FX2", + "name": "indTags", + "gap": 8, "children": [ { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" + "type": "frame", + "id": "DSgMw", + "name": "indTag1", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "rVbro", + "name": "chipText", + "fill": "$text-secondary", + "content": "Feature 1", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] }, { "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, + "id": "uoFFu", + "name": "indTag2", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], "children": [ { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] + "type": "text", + "id": "JI7l0", + "name": "chipText", + "fill": "$text-secondary", + "content": "Feature 2", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" } ] } ] } ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] } ] }, { "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", + "id": "ZReaA", + "name": "stepNum", + "width": 56, + "height": 56, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 28, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "m5Mjz", + "name": "stepNumText", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PriceCard1", + "name": "examplePricingBasic", "width": "fill_container", - "gap": 20, + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 24, + "padding": 32, "children": [ { "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "id": "teMVu", + "name": "pcBadge", + "enabled": false, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] }, - "layout": "vertical", - "gap": 24, - "padding": 32, + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], "children": [ { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] + "type": "text", + "id": "azC2t", + "name": "pcBadgeText", + "fill": "$text-primary", + "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "isTGs", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "ZFjfl", + "name": "pcName", + "fill": "$text-secondary", + "content": "Starter", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 }, { "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, + "id": "5UeZM", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", "children": [ { "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", + "id": "8fM2n", + "name": "pcPrice", + "fill": "$text-primary", + "content": "Free", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 }, { "type": "text", - "id": "uLtIh", - "name": "pcDesc", + "id": "GfS02", + "name": "pcPer", + "enabled": false, "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, + "content": "/th\u00e1ng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal" @@ -2298,148 +1880,118 @@ ] }, { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, + "type": "text", + "id": "uLtIh", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For small businesses getting started", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "u5uVY", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "MXmSA", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ { "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, + "id": "YbXof", + "name": "pcF1", + "gap": 10, + "alignItems": "center", "children": [ { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "icon_font", + "id": "mzamm", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" }, { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "3r8fL", + "name": "checkText", + "fill": "$text-secondary", + "content": "1 store", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] }, { "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", + "id": "Nj2yA", + "name": "pcF2", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, + "id": "NVTzn", + "name": "checkIcon", "width": 16, "height": 16, - "iconFontName": "arrow-right", + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-secondary" + "fill": "$green-success" }, { "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", + "id": "5LtsD", + "name": "checkText", + "fill": "$text-secondary", + "content": "100 transactions/month", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "GqUzO", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "yZlVe", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "Ut5uS", + "name": "checkText", + "fill": "$text-secondary", + "content": "Basic reports", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] } @@ -2447,116 +1999,146 @@ }, { "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", + "id": "0Fnac", + "name": "pcBtn", "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, + "cornerRadius": 10, "stroke": { - "thickness": 2, - "fill": "$orange-primary" + "thickness": 1, + "fill": "$border-default" }, - "layout": "vertical", - "gap": 24, - "padding": 32, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] + "type": "icon_font", + "id": "1w3HC", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RVZxt", + "name": "btnSText", + "fill": "$text-primary", + "content": "Get Started", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PriceCard2", + "name": "examplePricingPro", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "2qVjH", + "name": "pcBadge", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PthNf", + "name": "pcBadgeText", + "fill": "$text-primary", + "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "yT240", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "G4OEv", + "name": "pcName", + "fill": "$orange-primary", + "content": "Professional", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 }, { "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, + "id": "IQojv", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", "children": [ { "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", + "id": "R1uJY", + "name": "pcPrice", + "fill": "$text-primary", + "content": "499K", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 }, { "type": "text", - "id": "i9xHO", - "name": "pcDesc", + "id": "lbKkc", + "name": "pcPer", "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, + "content": "/th\u00e1ng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal" @@ -2564,163 +2146,118 @@ ] }, { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, + "type": "text", + "id": "i9xHO", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For growing business chains", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "GaBI4", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "KiK1Y", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ { "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, + "id": "s5RvM", + "name": "pcF1", + "gap": 10, + "alignItems": "center", "children": [ { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "icon_font", + "id": "7e7A1", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" }, { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "Lmf0e", + "name": "checkText", + "fill": "$text-secondary", + "content": "5 stores", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] }, { "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", + "id": "pc2H0", + "name": "pcF2", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, + "id": "JsYjG", + "name": "checkIcon", "width": 16, "height": 16, - "iconFontName": "arrow-right", + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-primary" + "fill": "$orange-primary" }, { "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", + "id": "UUmpR", + "name": "checkText", + "fill": "$text-secondary", + "content": "Unlimited transactions", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "jqWaK", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6LR43", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "ULIlu", + "name": "checkText", + "fill": "$text-secondary", + "content": "Advanced analytics", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] } @@ -2728,118 +2265,163 @@ }, { "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", + "id": "3xz7n", + "name": "proPricingBtn", "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] }, - "layout": "vertical", - "gap": 24, - "padding": 32, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "We76w", - "name": "pcBadge", + "type": "icon_font", + "id": "6y0tm", + "name": "btnPIcon", "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "96nc7", + "name": "btnPText", + "fill": "$text-primary", + "content": "Try 14 days free", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PriceCard3", + "name": "examplePricingEnterprise", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "We76w", + "name": "pcBadge", + "enabled": false, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ttbZY", + "name": "pcBadgeText", + "fill": "$text-primary", + "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "0aQSi", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "aSefC", + "name": "pcName", + "fill": "$text-secondary", + "content": "Enterprise", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 }, { "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, + "id": "QJm3P", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", "children": [ { "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", + "id": "PNKkF", + "name": "pcPrice", + "fill": "$text-primary", + "content": "Custom", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 }, { "type": "text", - "id": "teqD3", - "name": "pcDesc", + "id": "VHRx4", + "name": "pcPer", + "enabled": false, "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, + "content": "/th\u00e1ng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal" @@ -2847,150 +2429,161 @@ ] }, { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, + "type": "text", + "id": "teqD3", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For large enterprise chains", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "vbKaC", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "dBIlb", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ { "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", + "id": "EXa0J", + "name": "pcF1", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, + "id": "U0aiJ", + "name": "checkIcon", "width": 16, "height": 16, - "iconFontName": "arrow-right", + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-secondary" + "fill": "$green-success" }, { "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", + "id": "F221P", + "name": "checkText", + "fill": "$text-secondary", + "content": "Unlimited stores", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" + "fontSize": 13, + "fontWeight": "normal" } ] + }, + { + "type": "frame", + "id": "DHLmw", + "name": "pcF2", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "En6Un", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "ytc60", + "name": "checkText", + "fill": "$text-secondary", + "content": "API integration", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "zWEio", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "P4YlO", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "seCtG", + "name": "checkText", + "fill": "$text-secondary", + "content": "Dedicated account manager", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "8129K", + "name": "pcBtn", + "width": "fill_container", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "kqsyZ", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "koJzc", + "name": "btnSText", + "fill": "$text-primary", + "content": "Contact Sales", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" } ] } @@ -3022,260 +2615,206 @@ }, { "type": "frame", - "id": "FooterColRow", - "name": "footerColumnExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", + "id": "FootCol1", + "name": "exampleFooterCol1", + "layout": "vertical", + "gap": 16, "children": [ { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "jcBoY", + "name": "footColTitle", + "fill": "$text-primary", + "content": "Products", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" }, { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "NX2A9", + "name": "footColL1", + "fill": "$text-tertiary", + "content": "POS System", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" }, { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "qkmXd", + "name": "footColL2", + "fill": "$text-tertiary", + "content": "Loyalty Program", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "MqnX1", + "name": "footColL3", + "fill": "$text-tertiary", + "content": "Analytics", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "U5fbU", + "name": "footColL4", + "fill": "$text-tertiary", + "content": "Inventory", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] }, { "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", + "id": "FootCol2", + "name": "exampleFooterCol2", "layout": "vertical", "gap": 16, + "children": [ + { + "type": "text", + "id": "3f7yU", + "name": "footColTitle", + "fill": "$text-primary", + "content": "Industries", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "nUIva", + "name": "footColL1", + "fill": "$text-tertiary", + "content": "Restaurant & F&B", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "VMn3X", + "name": "footColL2", + "fill": "$text-tertiary", + "content": "Bar & Lounge", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "TYRQA", + "name": "footColL3", + "fill": "$text-tertiary", + "content": "Karaoke", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Y1hlD", + "name": "footColL4", + "fill": "$text-tertiary", + "content": "Coffee Shop", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "FootCol3", + "name": "exampleFooterCol3", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "text", + "id": "ynsnj", + "name": "footColTitle", + "fill": "$text-primary", + "content": "Support", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "600" + }, + { + "type": "text", + "id": "CxgY7", + "name": "footColL1", + "fill": "$text-tertiary", + "content": "Help Center", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "PNNws", + "name": "footColL2", + "fill": "$text-tertiary", + "content": "Contact", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "KTHFx", + "name": "footColL3", + "fill": "$text-tertiary", + "content": "Privacy Policy", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "F0e0G", + "name": "footColL4", + "fill": "$text-tertiary", + "content": "Terms of Use", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "LibLogo", + "name": "componentLibLogo", + "gap": 8, "alignItems": "center", "children": [ { - "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] + "type": "ellipse", + "id": "L1IHb", + "name": "logoDot", + "fill": "$orange-primary", + "width": 10, + "height": 10 }, { "type": "text", - "id": "LibTitle", - "name": "libTitle", + "id": "oAfvR", + "name": "logoText", "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", + "content": "aPOS", "fontFamily": "Roboto", - "fontSize": 48, + "fontSize": 22, "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" + "letterSpacing": 3 } ] }, @@ -3305,276 +2844,233 @@ }, { "type": "frame", - "id": "UtilRow", - "name": "utilExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, + "id": "Check1", + "name": "exampleCheckItem1", + "gap": 10, "alignItems": "center", "children": [ { - "type": "frame", - "id": "CheckRow", - "name": "checkListRow", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check2", - "name": "exampleCheckItem2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BrCzS", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "9qmDC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Another check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check3", - "name": "exampleCheckItem3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "87yKj", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "JoqXu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Third check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] + "type": "icon_font", + "id": "VJGh3", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "VwkNy", + "name": "checkText", + "fill": "$text-secondary", + "content": "Feature check list item", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Check2", + "name": "exampleCheckItem2", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "BrCzS", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "9qmDC", + "name": "checkText", + "fill": "$text-secondary", + "content": "Another check list item", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Check3", + "name": "exampleCheckItem3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "87yKj", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "JoqXu", + "name": "checkText", + "fill": "$text-secondary", + "content": "Third check list item", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Social1", + "name": "exampleFacebook", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "YXkpa", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social2", + "name": "exampleInstagram", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "4UrP1", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "instagram", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social3", + "name": "exampleYoutube", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QG5mc", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "youtube", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social4", + "name": "exampleLinkedIn", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FNwhd", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "linkedin", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "TrustEx", + "name": "exampleTrustStat", + "width": "fill_container", + "gap": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iObWZ", + "name": "tsLabel", + "fill": "$text-disabled", + "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" }, { "type": "rectangle", - "id": "DividerEx", - "name": "exampleDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 + "id": "M0mkC", + "name": "tsDivider1", + "fill": "$border-default", + "width": 1, + "height": 20 }, { - "type": "frame", - "id": "SocialRow", - "name": "socialIconsRow", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] + "type": "text", + "id": "wZxFi", + "name": "tsStat1", + "fill": "$text-tertiary", + "content": "50,000+ giao d\u1ecbch/ng\u00e0y", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" }, { - "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", - "width": "fill_container", - "gap": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao d\u1ecbch/ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] + "type": "rectangle", + "id": "9ZsNt", + "name": "tsDivider2", + "fill": "$border-default", + "width": 1, + "height": 20 + }, + { + "type": "text", + "id": "gpriC", + "name": "tsStat2", + "fill": "$text-tertiary", + "content": "99.9% uptime", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" } ] }, @@ -3604,76 +3100,66 @@ }, { "type": "frame", - "id": "NavExamples", - "name": "navExamples", + "id": "DesktopNav", + "name": "exampleDesktopNav", "width": "fill_container", - "layout": "vertical", - "gap": 20, + "height": "fit_content(84)", + "padding": [ + 20, + 120 + ], + "justifyContent": "space_between", + "alignItems": "center" + }, + { + "type": "frame", + "id": "MobileNav", + "name": "exampleMobileNav", + "width": "fill_container", + "padding": [ + 16, + 20 + ], + "justifyContent": "space_between", + "alignItems": "center", "children": [ { "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", + "id": "EYcUX", + "name": "mNavLogo", + "gap": 8, "alignItems": "center", "children": [ { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] + "type": "ellipse", + "id": "c7KAp", + "name": "logoDot", + "fill": "$orange-primary", + "width": 10, + "height": 10 }, { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" + "type": "text", + "id": "9deBe", + "name": "logoText", + "fill": "$text-primary", + "content": "aPOS", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600", + "letterSpacing": 3 } ] + }, + { + "type": "icon_font", + "id": "yEnDr", + "name": "hamburgerIcon", + "width": 24, + "height": 24, + "iconFontName": "menu", + "iconFontFamily": "lucide", + "fill": "$text-primary" } ] }, @@ -3703,388 +3189,372 @@ }, { "type": "frame", - "id": "NumpadFullExamples", - "name": "numpadFullExamples", - "width": "fill_container", - "fill": "$bg-surface", + "id": "NumpadFull", + "name": "Organism/Numpad/Full", + "reusable": true, + "fill": "$bg-elevated", "cornerRadius": 16, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default" }, - "padding": 40, - "justifyContent": "center", + "layout": "vertical", + "gap": 8, + "padding": 16, "children": [ { "type": "frame", - "id": "NumpadFull", - "name": "Organism/Numpad/Full", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", + "id": "NumpadRow1", + "name": "row1", "gap": 8, - "padding": 16, "children": [ { "type": "frame", - "id": "NumpadRow1", - "name": "row1", - "gap": 8, + "id": "NK7", + "name": "key7", + "width": 64, + "height": 64, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "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": "text", + "id": "NK7T", + "fill": "$text-primary", + "content": "7", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" } ] }, { "type": "frame", - "id": "NumpadRow2", - "name": "row2", - "gap": 8, + "id": "NK8", + "name": "key8", + "width": 64, + "height": 64, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "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": "text", + "id": "NK8T", + "fill": "$text-primary", + "content": "8", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" } ] }, { "type": "frame", - "id": "NumpadRow3", - "name": "row3", - "gap": 8, + "id": "NK9", + "name": "key9", + "width": 64, + "height": 64, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "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": "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": "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": "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": "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": "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": "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 - } - ] + "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 }, - "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" - } - ] + { + "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": "NumpadRow4", - "name": "row4", - "gap": 8, + "id": "NKDot", + "name": "keyDot", + "width": 64, + "height": 64, + "fill": "$bg-interactive", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "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": "text", + "id": "NKDotT", + "fill": "$text-primary", + "content": ".", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" } ] } @@ -4118,172 +3588,156 @@ }, { "type": "frame", - "id": "PaymentMethodsExamples", - "name": "paymentMethodsExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "justifyContent": "center", + "id": "PaymentGrid", + "name": "Organism/PaymentMethods", + "reusable": true, + "gap": 16, "children": [ { "type": "frame", - "id": "PaymentGrid", - "name": "Organism/PaymentMethods", - "reusable": true, - "gap": 16, + "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": "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": "icon_font", + "id": "PayCashIcon", + "width": 32, + "height": 32, + "iconFontName": "banknote", + "iconFontFamily": "lucide", + "fill": "$orange-primary" }, { - "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": "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": "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": "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": "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": "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" } ] } @@ -4315,234 +3769,216 @@ }, { "type": "frame", - "id": "DialogExamples", - "name": "dialogExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "ConfirmDialog", + "name": "Organism/Dialog/Confirm", + "reusable": true, + "width": 400, + "fill": "$bg-elevated", + "cornerRadius": 20, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default" }, "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", + "gap": 24, + "padding": 28, "children": [ { "type": "frame", - "id": "ConfirmDialog", - "name": "Organism/Dialog/Confirm", - "reusable": true, - "width": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, + "id": "ConfirmDialogHeader", + "name": "header", + "width": "fill_container", "layout": "vertical", - "gap": 24, - "padding": 28, + "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": "ConfirmDialogHeader", - "name": "header", + "id": "ConfirmDialogCancel", + "name": "cancelBtn", "width": "fill_container", - "layout": "vertical", - "gap": 8, + "height": 48, + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", "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", + "id": "ConfirmDialogCancelText", "fill": "$text-secondary", - "content": "Thanh to\u00e1n \u0111\u01a1n h\u00e0ng 100,116\u20ab b\u1eb1ng Ti\u1ec1n m\u1eb7t?", + "content": "H\u1ee7y", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal", - "textAlign": "center", - "lineHeight": 1.5 + "fontSize": 15, + "fontWeight": "500" } ] }, { "type": "frame", - "id": "ConfirmDialogActions", - "name": "actions", + "id": "ConfirmDialogConfirm", + "name": "confirmBtn", "width": "fill_container", - "gap": 12, + "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": "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": "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": "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": "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": "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" - } - ] + "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" } ] }, @@ -4572,173 +4008,156 @@ }, { "type": "frame", - "id": "ApptExamples", - "name": "apptExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "SlotAvailable", + "name": "Organism/Appointment/Available", + "reusable": true, + "width": 140, + "height": 80, + "fill": "$bg-elevated", + "cornerRadius": 12, "stroke": { "thickness": 1, - "fill": "$border-subtle" + "fill": "$border-default", + "dashPattern": [ + 4, + 4 + ] }, - "padding": 40, - "gap": 24, + "layout": "vertical", + "gap": 4, "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "SlotAvailTime", + "name": "slotTime", + "fill": "$text-primary", + "content": "09:00", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "500" + }, + { + "type": "text", + "id": "SlotAvailLabel", + "fill": "$green-success", + "content": "C\u00f3 slot", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SlotBooked", + "name": "Organism/Appointment/Booked", + "reusable": true, + "width": 140, + "height": 80, + "fill": "$spa-primary", + "cornerRadius": 12, + "layout": "vertical", + "padding": 12, + "gap": 4, + "alignItems": "flex_start", + "children": [ + { + "type": "text", + "id": "SlotBookTime", + "name": "timeRange", + "fill": "$text-muted", + "content": "10:00 - 11:30", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "SlotBookCust", + "name": "customerName", + "fill": "$text-primary", + "content": "Ch\u1ecb Lan", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + }, + { + "type": "text", + "id": "SlotBookSvc", + "name": "serviceName", + "fill": "$text-muted", + "content": "Facial 90 ph\u00fat", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "SlotInProgress", + "name": "Organism/Appointment/InProgress", + "reusable": true, + "width": 140, + "height": 80, + "fill": "$spa-dark", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$green-success" + }, + "layout": "vertical", + "padding": 12, + "gap": 4, + "alignItems": "flex_start", "children": [ { "type": "frame", - "id": "SlotAvailable", - "name": "Organism/Appointment/Available", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default", - "dashPattern": [ - 4, - 4 - ] - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", + "id": "SlotProgTop", + "width": "fill_container", + "justifyContent": "space_between", "children": [ { "type": "text", - "id": "SlotAvailTime", - "name": "slotTime", - "fill": "$text-primary", - "content": "09:00", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SlotAvailLabel", + "id": "SlotProgStatus", "fill": "$green-success", - "content": "C\u00f3 slot", + "content": "\u0110ANG L\u00c0M", "fontFamily": "Roboto", - "fontSize": 12, + "fontSize": 10, + "fontWeight": "700" + }, + { + "type": "text", + "id": "SlotProgRemain", + "fill": "$text-muted", + "content": "45p c\u00f2n", + "fontFamily": "Roboto", + "fontSize": 10, "fontWeight": "normal" } ] }, { - "type": "frame", - "id": "SlotBooked", - "name": "Organism/Appointment/Booked", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-primary", - "cornerRadius": 12, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "text", - "id": "SlotBookTime", - "name": "timeRange", - "fill": "$text-muted", - "content": "10:00 - 11:30", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "SlotBookCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Ch\u1ecb Lan", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotBookSvc", - "name": "serviceName", - "fill": "$text-muted", - "content": "Facial 90 ph\u00fat", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "SlotProgCust", + "name": "customerName", + "fill": "$text-primary", + "content": "Ch\u1ecb H\u01b0\u01a1ng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" }, { - "type": "frame", - "id": "SlotInProgress", - "name": "Organism/Appointment/InProgress", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-dark", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$green-success" - }, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "SlotProgTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "SlotProgStatus", - "fill": "$green-success", - "content": "\u0110ANG L\u00c0M", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SlotProgRemain", - "fill": "$text-muted", - "content": "45p c\u00f2n", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "SlotProgCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Ch\u1ecb H\u01b0\u01a1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotProgStaff", - "name": "therapist", - "fill": "$text-muted", - "content": "NV: Ng\u1ecdc", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "SlotProgStaff", + "name": "therapist", + "fill": "$text-muted", + "content": "NV: Ng\u1ecdc", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" } ] }, @@ -4777,62 +4196,117 @@ }, { "type": "frame", - "id": "RoomGridExamples", - "name": "roomGridExamples", - "width": "fill_container", - "fill": "$bg-surface", + "id": "RoomAvailable", + "name": "Organism/Room/Available", + "reusable": true, + "width": 160, + "height": 120, + "fill": "$bg-elevated", "cornerRadius": 16, "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "thickness": 2, + "fill": "$border-default" }, - "padding": 40, - "gap": 24, + "layout": "vertical", + "gap": 8, "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RmAvailIcon", + "iconFontName": "mic", + "iconFontFamily": "lucide", + "width": 24, + "height": 24, + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RmAvailName", + "name": "roomName", + "fill": "$text-primary", + "content": "Ph\u00f2ng VIP 01", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "text", + "id": "RmAvailCap", + "name": "capacity", + "fill": "$text-secondary", + "content": "8-12 ng\u01b0\u1eddi", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "RoomOccupied", + "name": "Organism/Room/Occupied", + "reusable": true, + "width": 160, + "height": 120, + "fill": "$karaoke-primary", + "cornerRadius": 16, + "layout": "vertical", + "justifyContent": "space_between", + "padding": 12, "children": [ { "type": "frame", - "id": "RoomAvailable", - "name": "Organism/Room/Available", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", + "id": "RmOccTop", + "width": "fill_container", + "justifyContent": "space_between", "children": [ - { - "type": "icon_font", - "id": "RmAvailIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 24, - "height": 24, - "fill": "$text-secondary" - }, { "type": "text", - "id": "RmAvailName", + "id": "RmOccName", "name": "roomName", "fill": "$text-primary", - "content": "Ph\u00f2ng VIP 01", + "content": "VIP 02", "fontFamily": "Roboto", - "fontSize": 16, + "fontSize": 14, "fontWeight": "600" }, { "type": "text", - "id": "RmAvailCap", - "name": "capacity", - "fill": "$text-secondary", - "content": "8-12 ng\u01b0\u1eddi", + "id": "RmOccTimer", + "name": "sessionTimer", + "fill": "$text-primary", + "content": "01:45:22", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "RmOccMid", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "RmOccAmount", + "name": "totalAmount", + "fill": "$text-primary", + "content": "1,250,000\u0111", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "RmOccRate", + "name": "hourlyRate", + "fill": "$text-muted", + "content": "Gi\u1edd: 150K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal" @@ -4841,121 +4315,49 @@ }, { "type": "frame", - "id": "RoomOccupied", - "name": "Organism/Room/Occupied", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$karaoke-primary", - "cornerRadius": 16, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 12, + "id": "RmOccActions", + "gap": 8, + "justifyContent": "center", "children": [ { "type": "frame", - "id": "RmOccTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "RmOccName", - "name": "roomName", - "fill": "$text-primary", - "content": "VIP 02", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RmOccTimer", - "name": "sessionTimer", - "fill": "$text-primary", - "content": "01:45:22", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RmOccMid", - "layout": "vertical", - "gap": 4, + "id": "RmOccAddBtn", + "width": 60, + "height": 28, + "fill": "#FFFFFF33", + "cornerRadius": 6, + "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", - "id": "RmOccAmount", - "name": "totalAmount", + "id": "RmOccAddTxt", "fill": "$text-primary", - "content": "1,250,000\u0111", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RmOccRate", - "name": "hourlyRate", - "fill": "$text-muted", - "content": "Gi\u1edd: 150K/h", + "content": "+ Th\u00eam", "fontFamily": "Roboto", "fontSize": 12, - "fontWeight": "normal" + "fontWeight": "500" } ] }, { "type": "frame", - "id": "RmOccActions", - "gap": 8, + "id": "RmOccEndBtn", + "width": 60, + "height": 28, + "fill": "#FFFFFF33", + "cornerRadius": 6, "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "RmOccAddBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccAddTxt", - "fill": "$text-primary", - "content": "+ Th\u00eam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RmOccEndBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccEndTxt", - "fill": "$text-primary", - "content": "K\u1ebft th\u00fac", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] + "type": "text", + "id": "RmOccEndTxt", + "fill": "$text-primary", + "content": "K\u1ebft th\u00fac", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" } ] } @@ -4989,438 +4391,413 @@ }, { "type": "frame", - "id": "KitchenDispExamples", - "name": "kitchenDisplayExamples", - "width": "fill_container", - "fill": "$bg-surface", + "id": "KitchenTicket", + "name": "Organism/Display/KitchenTicket", + "reusable": true, + "width": 280, + "fill": "$bg-elevated", "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "KTHeader", + "name": "ticketHeader", + "width": "fill_container", + "fill": "$orange-primary", + "cornerRadius": [ + 16, + 16, + 0, + 0 + ], + "padding": [ + 12, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "KTOrderNum", + "name": "orderNumber", + "fill": "#FFFFFF", + "content": "#0042", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "id": "KTTableInfo", + "name": "tableInfo", + "fill": "#FFFFFFCC", + "content": "B\u00e0n 07", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "KTElapsed", + "name": "elapsedTime", + "fill": "#FFFFFF", + "content": "5:32", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "KTItems", + "name": "ticketItems", + "width": "fill_container", + "layout": "vertical", + "padding": 12, + "gap": 8, + "children": [ + { + "type": "frame", + "id": "KTItem1", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "KTItem1Name", + "fill": "$text-primary", + "content": "2x Ph\u1edf b\u00f2 t\u00e1i", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "500" + }, + { + "type": "text", + "id": "KTItem1Note", + "fill": "$status-warning", + "content": "\u00cdt h\u00e0nh", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "KTItem2", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "KTItem2Name", + "fill": "$text-primary", + "content": "1x B\u00fan ch\u1ea3", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "KTItem3", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "id": "KTItem3Name", + "fill": "$text-secondary", + "content": "1x N\u01b0\u1edbc cam", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "KTItem3Station", + "fill": "$text-tertiary", + "content": "Bar", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "KTActions", + "name": "ticketActions", + "padding": 12, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "KTDoneBtn", + "width": 100, + "height": 36, + "fill": "$green-success", + "cornerRadius": 8, + "gap": 6, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "KTDoneIcon", + "iconFontName": "check", + "iconFontFamily": "lucide", + "width": 16, + "height": 16, + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "KTDoneTxt", + "fill": "#FFFFFF", + "content": "Xong", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "QueueNumber", + "name": "Organism/Display/QueueNumber", + "reusable": true, + "width": 200, + "height": 160, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "QNLabel", + "fill": "$text-secondary", + "content": "S\u1ed1 th\u1ee9 t\u1ef1", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "QNNumber", + "name": "queueNumber", + "fill": "$spa-primary", + "content": "A-042", + "fontFamily": "Roboto", + "fontSize": 48, + "fontWeight": "700" + }, + { + "type": "text", + "id": "QNService", + "name": "serviceType", + "fill": "$text-primary", + "content": "Facial", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "QueueCalling", + "name": "Organism/Display/QueueCalling", + "reusable": true, + "width": 300, + "height": 120, + "fill": "$green-success", + "cornerRadius": 20, + "layout": "vertical", + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "QCLabelRow", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QCBellIcon", + "iconFontName": "bell-ring", + "iconFontFamily": "lucide", + "width": 20, + "height": 20, + "fill": "#FFFFFF" + }, + { + "type": "text", + "id": "QCLabel", + "fill": "#FFFFFF", + "content": "M\u1edcI KH\u00c1CH", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "QCNumber", + "name": "callingNumber", + "fill": "#FFFFFF", + "content": "A-038", + "fontFamily": "Roboto", + "fontSize": 48, + "fontWeight": "700" + }, + { + "type": "text", + "id": "QCStation", + "name": "station", + "fill": "#FFFFFFCC", + "content": "Ph\u00f2ng 3 - Ng\u1ecdc", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "RoomDisplay", + "name": "Organism/Display/RoomStatus", + "reusable": true, + "width": 400, + "height": 300, + "fill": "$bg-surface", + "cornerRadius": 20, "stroke": { "thickness": 1, "fill": "$border-subtle" }, "layout": "vertical", - "gap": 32, - "padding": 40, + "justifyContent": "space_between", + "padding": 24, "alignItems": "center", "children": [ { - "type": "frame", - "id": "KitchenTicket", - "name": "Organism/Display/KitchenTicket", - "reusable": true, - "width": 280, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "KTHeader", - "name": "ticketHeader", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": [ - 16, - 16, - 0, - 0 - ], - "padding": [ - 12, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "KTOrderNum", - "name": "orderNumber", - "fill": "#FFFFFF", - "content": "#0042", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "KTTableInfo", - "name": "tableInfo", - "fill": "#FFFFFFCC", - "content": "B\u00e0n 07", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTElapsed", - "name": "elapsedTime", - "fill": "#FFFFFF", - "content": "5:32", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "KTItems", - "name": "ticketItems", - "width": "fill_container", - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "KTItem1", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem1Name", - "fill": "$text-primary", - "content": "2x Ph\u1edf b\u00f2 t\u00e1i", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTItem1Note", - "fill": "$status-warning", - "content": "\u00cdt h\u00e0nh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "KTItem2", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "KTItem2Name", - "fill": "$text-primary", - "content": "1x B\u00fan ch\u1ea3", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "KTItem3", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem3Name", - "fill": "$text-secondary", - "content": "1x N\u01b0\u1edbc cam", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTItem3Station", - "fill": "$text-tertiary", - "content": "Bar", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KTActions", - "name": "ticketActions", - "padding": 12, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "KTDoneBtn", - "width": 100, - "height": 36, - "fill": "$green-success", - "cornerRadius": 8, - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KTDoneIcon", - "iconFontName": "check", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "KTDoneTxt", - "fill": "#FFFFFF", - "content": "Xong", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] + "type": "text", + "id": "RDName", + "name": "roomName", + "fill": "$text-primary", + "content": "PH\u00d2NG VIP 01", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" }, { "type": "frame", - "id": "QueueDispRow", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "QueueNumber", - "name": "Organism/Display/QueueNumber", - "reusable": true, - "width": 200, - "height": 160, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QNLabel", - "fill": "$text-secondary", - "content": "S\u1ed1 th\u1ee9 t\u1ef1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "QNNumber", - "name": "queueNumber", - "fill": "$spa-primary", - "content": "A-042", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QNService", - "name": "serviceType", - "fill": "$text-primary", - "content": "Facial", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "QueueCalling", - "name": "Organism/Display/QueueCalling", - "reusable": true, - "width": 300, - "height": 120, - "fill": "$green-success", - "cornerRadius": 20, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QCLabelRow", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QCBellIcon", - "iconFontName": "bell-ring", - "iconFontFamily": "lucide", - "width": 20, - "height": 20, - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "QCLabel", - "fill": "#FFFFFF", - "content": "M\u1edcI KH\u00c1CH", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "QCNumber", - "name": "callingNumber", - "fill": "#FFFFFF", - "content": "A-038", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QCStation", - "name": "station", - "fill": "#FFFFFFCC", - "content": "Ph\u00f2ng 3 - Ng\u1ecdc", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RoomDisplay", - "name": "Organism/Display/RoomStatus", - "reusable": true, - "width": 400, - "height": 300, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, + "id": "RDTimerBox", "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, + "gap": 8, "alignItems": "center", "children": [ { "type": "text", - "id": "RDName", - "name": "roomName", - "fill": "$text-primary", - "content": "PH\u00d2NG VIP 01", + "id": "RDTimerLabel", + "fill": "$text-secondary", + "content": "TH\u1edcI GIAN", "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" + "fontSize": 14, + "fontWeight": "normal" }, + { + "type": "text", + "id": "RDTimer", + "name": "sessionTimer", + "fill": "$karaoke-primary", + "content": "02:15:42", + "fontFamily": "Roboto", + "fontSize": 64, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "id": "RDStats", + "gap": 24, + "children": [ { "type": "frame", - "id": "RDTimerBox", + "id": "RDTotalBox", "layout": "vertical", - "gap": 8, "alignItems": "center", "children": [ { "type": "text", - "id": "RDTimerLabel", + "id": "RDTotalLabel", "fill": "$text-secondary", - "content": "TH\u1edcI GIAN", + "content": "T\u1ed5ng ti\u1ec1n", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", - "id": "RDTimer", - "name": "sessionTimer", - "fill": "$karaoke-primary", - "content": "02:15:42", + "id": "RDTotalVal", + "name": "totalAmount", + "fill": "$text-primary", + "content": "1,850,000\u0111", "fontFamily": "Roboto", - "fontSize": 64, - "fontWeight": "700" + "fontSize": 24, + "fontWeight": "600" } ] }, { "type": "frame", - "id": "RDStats", - "gap": 24, + "id": "RDPendingBox", + "layout": "vertical", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "RDTotalBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDTotalLabel", - "fill": "$text-secondary", - "content": "T\u1ed5ng ti\u1ec1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDTotalVal", - "name": "totalAmount", - "fill": "$text-primary", - "content": "1,850,000\u0111", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] + "type": "text", + "id": "RDPendingLabel", + "fill": "$text-secondary", + "content": "Order m\u1edbi", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" }, { - "type": "frame", - "id": "RDPendingBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDPendingLabel", - "fill": "$text-secondary", - "content": "Order m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDPendingVal", - "name": "pendingItems", - "fill": "$status-warning", - "content": "3 m\u00f3n", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "500" - } - ] + "type": "text", + "id": "RDPendingVal", + "name": "pendingItems", + "fill": "$status-warning", + "content": "3 m\u00f3n", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "500" } ] } @@ -5463,154 +4840,137 @@ }, { "type": "frame", - "id": "TableMapExamples", - "name": "tableMapExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, + "id": "TableAvailable", + "name": "Organism/Table/Available", + "reusable": true, + "width": 100, + "height": 100, + "fill": "#22C55E18", + "cornerRadius": 12, "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "thickness": 2, + "fill": "$green-success" }, - "padding": 40, - "gap": 24, + "layout": "vertical", + "gap": 4, "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "TableAvailable", - "name": "Organism/Table/Available", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$green-success" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblAvailNum", - "name": "tableNumber", - "fill": "$green-success", - "content": "T01", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblAvailSeats", - "name": "seatCount", - "fill": "$text-secondary", - "content": "4 gh\u1ebf", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "TblAvailNum", + "name": "tableNumber", + "fill": "$green-success", + "content": "T01", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" }, { - "type": "frame", - "id": "TableOccupied", - "name": "Organism/Table/Occupied", - "reusable": true, - "width": 100, - "height": 100, - "fill": "$orange-primary", - "cornerRadius": 12, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblOccNum", - "name": "tableNumber", - "fill": "$text-primary", - "content": "T02", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblOccAmount", - "name": "orderAmount", - "fill": "$text-muted", - "content": "450K", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblOccTime", - "name": "elapsedTime", - "fill": "#FFFFFF99", - "content": "45 ph\u00fat", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "TblAvailSeats", + "name": "seatCount", + "fill": "$text-secondary", + "content": "4 gh\u1ebf", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TableOccupied", + "name": "Organism/Table/Occupied", + "reusable": true, + "width": 100, + "height": 100, + "fill": "$orange-primary", + "cornerRadius": 12, + "layout": "vertical", + "gap": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TblOccNum", + "name": "tableNumber", + "fill": "$text-primary", + "content": "T02", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" }, { - "type": "frame", - "id": "TableReserved", - "name": "Organism/Table/Reserved", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#F59E0B18", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$status-warning" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblResNum", - "name": "tableNumber", - "fill": "$status-warning", - "content": "T03", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblResTime", - "name": "reserveTime", - "fill": "$text-secondary", - "content": "19:00", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblResName", - "name": "guestName", - "fill": "$text-tertiary", - "content": "Anh Minh", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] + "type": "text", + "id": "TblOccAmount", + "name": "orderAmount", + "fill": "$text-muted", + "content": "450K", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "TblOccTime", + "name": "elapsedTime", + "fill": "#FFFFFF99", + "content": "45 ph\u00fat", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "TableReserved", + "name": "Organism/Table/Reserved", + "reusable": true, + "width": 100, + "height": 100, + "fill": "#F59E0B18", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$status-warning" + }, + "layout": "vertical", + "gap": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "TblResNum", + "name": "tableNumber", + "fill": "$status-warning", + "content": "T03", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "TblResTime", + "name": "reserveTime", + "fill": "$text-secondary", + "content": "19:00", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "id": "TblResName", + "name": "guestName", + "fill": "$text-tertiary", + "content": "Anh Minh", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" } ] }, @@ -5998,6 +5358,22 @@ "shadow-xl": { "type": "string", "value": "0 20px 25px rgba(0,0,0,0.6)" + }, + "bar-primary": { + "type": "color", + "value": "#8B5CF6" + }, + "karaoke-primary": { + "type": "color", + "value": "#EC4899" + }, + "spa-primary": { + "type": "color", + "value": "#14B8A6" + }, + "spa-dark": { + "type": "color", + "value": "#0D9488" } } } \ No newline at end of file