@kurot/cli 3.5.0 → 3.6.1

package/templates/game/resource/assets/ui/kui/kui.json

@@ -0,0 +1,240 @@
+{
+	"file": "kui.png",
+	"frames": {
+		"button_disabled": {
+			"x": 142,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"button_down": {
+			"x": 246,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"button_up": {
+			"x": 350,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"checkbox_disabled": {
+			"x": 198,
+			"y": 358,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_down": {
+			"x": 246,
+			"y": 286,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected": {
+			"x": 302,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected_disabled": {
+			"x": 198,
+			"y": 422,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected_down": {
+			"x": 366,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_up": {
+			"x": 430,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"chevron": {
+			"x": 326,
+			"y": 470,
+			"w": 32,
+			"h": 32
+		},
+		"chevron_disabled": {
+			"x": 366,
+			"y": 470,
+			"w": 32,
+			"h": 32
+		},
+		"chevron_open": {
+			"x": 406,
+			"y": 406,
+			"w": 32,
+			"h": 32
+		},
+		"close_disabled": {
+			"x": 230,
+			"y": 214,
+			"w": 64,
+			"h": 64
+		},
+		"close_down": {
+			"x": 126,
+			"y": 358,
+			"w": 64,
+			"h": 64
+		},
+		"close_up": {
+			"x": 126,
+			"y": 430,
+			"w": 64,
+			"h": 64
+		},
+		"panel": {
+			"x": 6,
+			"y": 6,
+			"w": 128,
+			"h": 128
+		},
+		"progress": {
+			"x": 262,
+			"y": 478,
+			"w": 24,
+			"h": 24
+		},
+		"progress_track": {
+			"x": 294,
+			"y": 478,
+			"w": 24,
+			"h": 24
+		},
+		"radio_disabled": {
+			"x": 262,
+			"y": 350,
+			"w": 56,
+			"h": 56
+		},
+		"radio_down": {
+			"x": 310,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected": {
+			"x": 262,
+			"y": 414,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected_disabled": {
+			"x": 374,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected_down": {
+			"x": 438,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_up": {
+			"x": 326,
+			"y": 342,
+			"w": 56,
+			"h": 56
+		},
+		"scroll_thumb": {
+			"x": 390,
+			"y": 446,
+			"w": 16,
+			"h": 16
+		},
+		"slider_thumb": {
+			"x": 326,
+			"y": 406,
+			"w": 56,
+			"h": 56
+		},
+		"slider_thumb_disabled": {
+			"x": 390,
+			"y": 342,
+			"w": 56,
+			"h": 56
+		},
+		"surface_disabled_selected": {
+			"x": 142,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_down": {
+			"x": 6,
+			"y": 142,
+			"w": 96,
+			"h": 96
+		},
+		"surface_selected": {
+			"x": 246,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_selected_down": {
+			"x": 350,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_up": {
+			"x": 6,
+			"y": 246,
+			"w": 96,
+			"h": 96
+		},
+		"switch_disabled_off": {
+			"x": 6,
+			"y": 350,
+			"w": 112,
+			"h": 64
+		},
+		"switch_disabled_on": {
+			"x": 6,
+			"y": 422,
+			"w": 112,
+			"h": 64
+		},
+		"switch_handle": {
+			"x": 454,
+			"y": 342,
+			"w": 48,
+			"h": 48
+		},
+		"switch_handle_disabled": {
+			"x": 454,
+			"y": 398,
+			"w": 48,
+			"h": 48
+		},
+		"switch_off": {
+			"x": 110,
+			"y": 214,
+			"w": 112,
+			"h": 64
+		},
+		"switch_on": {
+			"x": 126,
+			"y": 286,
+			"w": 112,
+			"h": 64
+		},
+		"track": {
+			"x": 198,
+			"y": 486,
+			"w": 16,
+			"h": 16
+		}
+	},
+	"resolution": 2
+}

package/templates/game/resource/config/style.json

@@ -4,13 +4,35 @@
 		"default": "primary",
 		"families": {
 			"primary": {
-				"fallback": ["Arial", "sans-serif"],
+				"fallback": [
+					"Arial",
+					"sans-serif"
+				],
 				"faces": [
-					{ "url": "assets/fonts/ChakraPetch-Regular.ttf", "weight": 400 },
-					{ "url": "assets/fonts/ChakraPetch-Bold.ttf", "weight": 700 }
+					{
+						"url": "assets/fonts/ChakraPetch-Regular.ttf",
+						"weight": 400
+					},
+					{
+						"url": "assets/fonts/ChakraPetch-Bold.ttf",
+						"weight": 700
+					}
 				]
 			}
 		}
 	},
-	"colors": { "disabled-text": "#999999" }
+	"colors": {
+		"disabled-text": "#7C8799",
+		"brand": "#1487E8",
+		"brand-pressed": "#0874CF",
+		"on-brand": "#071D30",
+		"canvas": "#EDF3FC",
+		"surface": "#FFFFFF",
+		"soft": "#F1F5FC",
+		"edge": "#DBE5F2",
+		"text": "#18273E",
+		"muted-text": "#64748B",
+		"disabled": "#EEF1F6",
+		"selected": "#E4F2FF"
+	}
 }

package/templates/game/resource/default.res.json

@@ -1,15 +1,82 @@
 {
 	"groups": [
 		{
-			"keys": "eui,locale_json,lang_en_US_properties",
+			"keys": "kui,locale_json,lang_en_US_properties",
 			"name": "preload"
 		}
 	],
 	"resources": [
 		{
-			"name": "eui",
+			"name": "kui",
 			"type": "sheet",
-			"url": "assets/ui/eui/eui.json"
+			"url": "assets/ui/kui/kui.json",
+			"subkeys": {
+				"button_up": {
+					"scale9grid": "16,16,16,16"
+				},
+				"button_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"button_disabled": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_up": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_selected": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_selected_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_disabled_selected": {
+					"scale9grid": "16,16,16,16"
+				},
+				"panel": {
+					"scale9grid": "24,24,16,16"
+				},
+				"track": {
+					"scale9grid": "3,3,2,2"
+				},
+				"progress_track": {
+					"scale9grid": "5,5,2,2"
+				},
+				"progress": {
+					"scale9grid": "5,5,2,2"
+				},
+				"scroll_thumb": {
+					"scale9grid": "3,3,2,2"
+				},
+				"checkbox_up": {},
+				"checkbox_down": {},
+				"checkbox_disabled": {},
+				"checkbox_selected": {},
+				"checkbox_selected_down": {},
+				"checkbox_selected_disabled": {},
+				"radio_up": {},
+				"radio_down": {},
+				"radio_disabled": {},
+				"radio_selected": {},
+				"radio_selected_down": {},
+				"radio_selected_disabled": {},
+				"slider_thumb": {},
+				"slider_thumb_disabled": {},
+				"switch_off": {},
+				"switch_on": {},
+				"switch_disabled_off": {},
+				"switch_disabled_on": {},
+				"switch_handle": {},
+				"switch_handle_disabled": {},
+				"chevron": {},
+				"chevron_open": {},
+				"chevron_disabled": {},
+				"close_up": {},
+				"close_down": {},
+				"close_disabled": {}
+			}
 		},
 		{
 			"name": "locale_json",

package/templates/game/resource/ui/skins/ButtonSkin.kui.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ButtonSkin" states="disabled,down,up" minHeight="50" minWidth="100">
-    <Image height="100%" scale9Grid="1,3,8,8" source="button_up_png" width="100%" alpha.disabled="0.5" source.down="button_down_png" />
-    <Label id="labelDisplay" bottom="8" left="8" right="8" size="20" textAlign="center" textColor="#FFFFFF" textColor.disabled="@style:colors:disabled-text" top="8" verticalAlign="middle" />
-    <Image id="iconDisplay" horizontalCenter="0" verticalCenter="0" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ButtonSkin" states="disabled,down,up" minHeight="48" minWidth="96">
+    <Image height="100%" width="100%" source="kui.button_up" source.down="kui.button_down" source.disabled="kui.button_disabled" touchEnabled="false" />
+    <Label id="labelDisplay" left="16" right="16" top="10" bottom="10" size="18" bold="true" multiline="false" textFit="shrink" minFontSize="14" textAlign="center" verticalAlign="middle" textColor="@style:colors:on-brand" textColor.disabled="@style:colors:disabled-text" top.down="12" bottom.down="8" />
+    <Image id="iconDisplay" horizontalCenter="0" verticalCenter="0" verticalCenter.down="2" />
 </Skin>

package/templates/game/resource/ui/skins/CheckBoxSkin.kui.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.CheckBoxSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected">
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.CheckBoxSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" minHeight="44">
     <Group height="100%" width="100%">
         <layout>
-            <HorizontalLayout verticalAlign="middle" />
+            <HorizontalLayout gap="10" paddingTop="8" paddingBottom="8" verticalAlign="middle" />
         </layout>
-        <Image alpha="1" fillMode="scale" source="checkbox_unselect_png" alpha.disabled="0.5" source.disabledAndSelected="checkbox_select_disabled_png" alpha.down="0.7" source.downAndSelected="checkbox_select_down_png" source.upAndSelected="checkbox_select_up_png" />
-        <Label id="labelDisplay" size="20" textAlign="center" textColor="#707070" verticalAlign="middle" />
+        <Image width="28" height="28" source="kui.checkbox_up" source.down="kui.checkbox_down" source.disabled="kui.checkbox_disabled" source.disabledAndSelected="kui.checkbox_selected_disabled" source.downAndSelected="kui.checkbox_selected_down" source.upAndSelected="kui.checkbox_selected" />
+        <Label id="labelDisplay" size="18" multiline="false" textColor="@style:colors:text" textColor.disabled="@style:colors:disabled-text" textColor.disabledAndSelected="@style:colors:disabled-text" verticalAlign="middle" />
     </Group>
 </Skin>

package/templates/game/resource/ui/skins/CloseButtonSkin.kui.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.CloseButtonSkin" states="disabled,down,up" minWidth="44" minHeight="44">
+    <Image width="32" height="32" horizontalCenter="0" verticalCenter="0" source="kui.close_up" source.down="kui.close_down" source.disabled="kui.close_disabled" />
+</Skin>

package/templates/game/resource/ui/skins/ComboBoxSkin.kui.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ComboBoxSkin" states="disabled,normal,open" minHeight="36" minWidth="100">
-    <Rect fillColor="#1A1A2E" height="36" strokeColor="#0F3460" strokeWeight="1" width="100%" fillColor.disabled="#16213E" strokeColor.disabled="#4A5459" fillColor.open="#16213E" strokeColor.open="#6C5CE7" />
-    <Label id="labelDisplay" height="36" left="10" right="36" size="14" textColor="#DFE6E9" top="0" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" />
-    <Label height="36" right="4" size="10" text="▼" textAlign="center" textColor="#636E72" top="0" verticalAlign="middle" width="24" textColor.open="#6C5CE7" />
-    <Scroller id="dropDown" height="180" left="0" right="0" top="36" visible="false">
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ComboBoxSkin" states="disabled,normal,open" minHeight="48" minWidth="160">
+    <Image height="48" top="0" width="100%" source="kui.surface_up" source.disabled="kui.button_disabled" source.open="kui.surface_selected" />
+    <Label id="labelDisplay" height="48" left="14" right="42" size="18" multiline="false" textFit="shrink" minFontSize="14" textColor="@style:colors:text" top="0" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" />
+    <Image height="16" width="16" right="14" top="16" source="kui.chevron" source.open="kui.chevron_open" source.disabled="kui.chevron_disabled" />
+    <Scroller id="dropDown" height="180" left="0" right="0" top="54" visible="false" includeInLayout="false">
         <List id="list" height="180" width="100%" />
     </Scroller>
 </Skin>

package/templates/game/resource/ui/skins/HScrollBarSkin.kui.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Skin xmlns="https://kurot.dev/ui/1" class="skins.HScrollBarSkin" minHeight="8" minWidth="20">
-    <Image id="thumb" height="8" scale9Grid="3,3,2,2" source="roundthumb_png" verticalCenter="0" width="30" />
+    <Image id="thumb" height="8" source="kui.scroll_thumb" verticalCenter="0" width="30" />
 </Skin>

package/templates/game/resource/ui/skins/HSliderSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.HSliderSkin" minHeight="8" minWidth="20">
-    <Image id="track" height="6" scale9Grid="1,1,4,4" source="track_sb_png" verticalCenter="0" width="100%" />
-    <Image id="thumb" source="thumb_png" verticalCenter="0" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.HSliderSkin" states="disabled" minHeight="44" minWidth="80">
+    <Image id="track" height="8" source="kui.track" verticalCenter="0" width="100%" />
+    <Image id="thumb" width="28" height="28" source="kui.slider_thumb" source.disabled="kui.slider_thumb_disabled" verticalCenter="0" />
 </Skin>

package/templates/game/resource/ui/skins/ItemRendererSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ItemRendererSkin" states="disabled,down,up" minHeight="50" minWidth="100">
-    <Image height="100%" scale9Grid="1,3,8,8" source="button_up_png" width="100%" alpha.disabled="0.5" source.down="button_down_png" />
-    <Label id="labelDisplay" bottom="8" left="8" right="8" size="20" textAlign="center" textColor="#FFFFFF" top="8" verticalAlign="middle" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ItemRendererSkin" states="disabled,down,up,downAndSelected,upAndSelected" minHeight="48" minWidth="96">
+    <Image height="100%" width="100%" source="kui.surface_up" source.down="kui.surface_down" source.disabled="kui.button_disabled" source.downAndSelected="kui.surface_selected_down" source.upAndSelected="kui.surface_selected" touchEnabled="false" />
+    <Label id="labelDisplay" bottom="10" left="14" right="14" top="10" size="18" multiline="false" textFit="shrink" minFontSize="14" textAlign="left" textColor="@style:colors:text" textColor.disabled="@style:colors:disabled-text" verticalAlign="middle" />
 </Skin>

package/templates/game/resource/ui/skins/PanelSkin.kui.xml

@@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.PanelSkin" minHeight="230" minWidth="450">
-    <Image bottom="0" left="0" right="0" scale9Grid="2,2,12,12" source="border_png" top="0" />
-    <Group id="moveArea" height="45" left="0" right="0" top="0">
-        <Image bottom="0" left="0" right="0" scale9Grid="2,2,12,12" source="header_png" top="0" />
-        <Label id="titleDisplay" left="15" right="5" size="20" textColor="#FFFFFF" verticalCenter="0" wordWrap="false" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.PanelSkin" minHeight="160" minWidth="240">
+    <Image bottom="0" left="0" right="0" source="kui.panel" top="0" touchEnabled="false" />
+    <Group id="moveArea" height="56" left="0" right="0" top="0">
+        <Label id="titleDisplay" left="20" right="60" size="20" bold="true" textColor="@style:colors:text" verticalCenter="0" verticalAlign="middle" multiline="false" textFit="shrink" minFontSize="16" />
     </Group>
-    <Button id="closeButton" bottom="5" horizontalCenter="0" label="close" />
+    <Button id="closeButton" top="6" right="8" width="44" height="44" skinName="skins.CloseButtonSkin" />
 </Skin>

package/templates/game/resource/ui/skins/ProgressBarSkin.kui.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ProgressBarSkin" minHeight="18" minWidth="30">
-    <Image height="100%" scale9Grid="1,1,4,4" source="track_pb_png" verticalCenter="0" width="100%" />
-    <Image id="thumb" height="100%" scale9Grid="1,1,4,4" source="thumb_pb_png" width="100%" />
-    <Label id="labelDisplay" horizontalCenter="0" size="15" textAlign="center" textColor="#707070" verticalAlign="middle" verticalCenter="0" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ProgressBarSkin" minHeight="44" minWidth="80">
+    <Image height="12" source="kui.progress_track" verticalCenter="8" width="100%" />
+    <Image id="thumb" height="12" source="kui.progress" verticalCenter="8" width="100%" />
+    <Label id="labelDisplay" top="0" right="0" size="14" textAlign="right" textColor="@style:colors:muted-text" />
 </Skin>

package/templates/game/resource/ui/skins/RadioButtonSkin.kui.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.RadioButtonSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected">
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.RadioButtonSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" minHeight="44">
     <Group height="100%" width="100%">
         <layout>
-            <HorizontalLayout verticalAlign="middle" />
+            <HorizontalLayout gap="10" paddingTop="8" paddingBottom="8" verticalAlign="middle" />
         </layout>
-        <Image alpha="1" fillMode="scale" source="radiobutton_unselect_png" alpha.disabled="0.5" source.disabledAndSelected="radiobutton_select_disabled_png" alpha.down="0.7" source.downAndSelected="radiobutton_select_down_png" source.upAndSelected="radiobutton_select_up_png" />
-        <Label id="labelDisplay" size="20" textAlign="center" textColor="#707070" verticalAlign="middle" />
+        <Image width="28" height="28" source="kui.radio_up" source.down="kui.radio_down" source.disabled="kui.radio_disabled" source.disabledAndSelected="kui.radio_selected_disabled" source.downAndSelected="kui.radio_selected_down" source.upAndSelected="kui.radio_selected" />
+        <Label id="labelDisplay" size="18" multiline="false" textColor="@style:colors:text" textColor.disabled="@style:colors:disabled-text" textColor.disabledAndSelected="@style:colors:disabled-text" verticalAlign="middle" />
     </Group>
 </Skin>

package/templates/game/resource/ui/skins/TextInputSkin.kui.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.TextInputSkin" states="disabled,disabledWithPrompt,normal,normalWithPrompt" minHeight="40" minWidth="300">
-    <Rect fillColor="#FFFFFF" height="100%" width="100%" alpha.disabled="0.5" />
-    <EditableText id="textDisplay" height="24" left="10" right="10" size="20" textColor="#000000" verticalAlign="middle" verticalCenter="0" textColor.disabled="@style:colors:disabled-text" />
-    <Label id="promptDisplay" height="24" left="10" multiline="false" right="10" size="20" textColor="#A9A9A9" touchEnabled="false" verticalAlign="middle" verticalCenter="0" visible="false" wordWrap="false" visible.disabledWithPrompt="true" visible.normalWithPrompt="true" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.TextInputSkin" states="disabled,disabledWithPrompt,normal,normalWithPrompt" minHeight="48" minWidth="160">
+    <Image height="100%" width="100%" source="kui.surface_up" source.disabled="kui.button_disabled" source.disabledWithPrompt="kui.button_disabled" touchEnabled="false" />
+    <EditableText id="textDisplay" height="28" left="14" right="14" size="18" textColor="@style:colors:text" verticalAlign="middle" verticalCenter="0" textColor.disabled="@style:colors:disabled-text" textColor.disabledWithPrompt="@style:colors:disabled-text" />
+    <Label id="promptDisplay" height="28" left="14" right="14" size="18" multiline="false" textColor="@style:colors:muted-text" textColor.disabledWithPrompt="@style:colors:disabled-text" touchEnabled="false" verticalAlign="middle" verticalCenter="0" visible="false" visible.disabledWithPrompt="true" visible.normalWithPrompt="true" />
 </Skin>

package/templates/game/resource/ui/skins/ToggleButtonSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ToggleButtonSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" minHeight="50" minWidth="100">
-    <Rect fillColor="#636E72" height="100%" strokeColor="#4A5459" strokeWeight="1" width="100%" fillColor.disabled="#2D3436" fillColor.disabledAndSelected="#2D3436" fillColor.down="#4A5459" fillColor.downAndSelected="#5A4BD1" fillColor.upAndSelected="#6C5CE7" />
-    <Label id="labelDisplay" bottom="8" left="8" right="8" size="16" textAlign="center" textColor="#DFE6E9" top="8" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" textColor.upAndSelected="#FFFFFF" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ToggleButtonSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" minHeight="48" minWidth="96">
+    <Image height="100%" width="100%" source="kui.surface_up" source.down="kui.surface_down" source.disabled="kui.button_disabled" source.disabledAndSelected="kui.surface_disabled_selected" source.downAndSelected="kui.surface_selected_down" source.upAndSelected="kui.surface_selected" touchEnabled="false" />
+    <Label id="labelDisplay" bottom="10" left="16" right="16" top="10" size="18" bold="true" multiline="false" textFit="shrink" minFontSize="14" textAlign="center" textColor="@style:colors:text" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" textColor.disabledAndSelected="@style:colors:disabled-text" />
 </Skin>

package/templates/game/resource/ui/skins/ToggleSwitchSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ToggleSwitchSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected">
-    <Image source="on_png" source.disabled="off_png" source.down="off_png" source.up="off_png" />
-    <Image horizontalCenter="-18" source="handle_png" verticalCenter="0" horizontalCenter.disabledAndSelected="18" horizontalCenter.downAndSelected="18" horizontalCenter.upAndSelected="18" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ToggleSwitchSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" width="56" height="44" minWidth="56" minHeight="44">
+    <Image width="56" height="32" horizontalCenter="0" verticalCenter="0" source="kui.switch_off" source.disabled="kui.switch_disabled_off" source.disabledAndSelected="kui.switch_disabled_on" source.downAndSelected="kui.switch_on" source.upAndSelected="kui.switch_on" />
+    <Image width="24" height="24" horizontalCenter="-12" verticalCenter="0" source="kui.switch_handle" source.disabled="kui.switch_handle_disabled" source.disabledAndSelected="kui.switch_handle_disabled" horizontalCenter.disabledAndSelected="12" horizontalCenter.downAndSelected="12" horizontalCenter.upAndSelected="12" />
 </Skin>

package/templates/game/resource/ui/skins/VScrollBarSkin.kui.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Skin xmlns="https://kurot.dev/ui/1" class="skins.VScrollBarSkin" minHeight="20" minWidth="8">
-    <Image id="thumb" height="30" horizontalCenter="0" scale9Grid="3,3,2,2" source="roundthumb_png" width="8" />
+    <Image id="thumb" height="30" horizontalCenter="0" source="kui.scroll_thumb" width="8" />
 </Skin>

package/templates/game/resource/ui/skins/VSliderSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.VSliderSkin" minHeight="30" minWidth="25">
-    <Image id="track" height="100%" horizontalCenter="0" scale9Grid="1,1,4,4" source="track_png" width="7" />
-    <Image id="thumb" horizontalCenter="0" source="thumb_png" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.VSliderSkin" states="disabled" minHeight="80" minWidth="44">
+    <Image id="track" height="100%" horizontalCenter="0" source="kui.track" width="8" />
+    <Image id="thumb" width="28" height="28" horizontalCenter="0" source="kui.slider_thumb" source.disabled="kui.slider_thumb_disabled" />
 </Skin>

package/templates/game/src/Main.ts

@@ -88,7 +88,7 @@ class Main extends UILayer {
 	/**
 	 * Create the game scene.
 	 *
-	 * Build a responsive view with EUI components and constraint-based layout.
+	 * Build a responsive view with Kurot UI components and constraint-based layout.
 	 */
 	private _createGameScene(): void {
 		// Responsive background