@kurot/cli 3.5.0 → 3.6.0

package/docs/game-template.md

@@ -1,12 +1,12 @@
 # Project styles and languages in the game template
 
-CLI 3.2.1 is published with this template update. It adds
-project-owned initialization without changing Core/UI APIs or migrating existing
-projects. The empty template stays minimal.
+Project-owned style/font/language initialization was introduced in CLI 3.2.1
+and remains in CLI 3.6.0 (pending publication). Existing projects keep their own startup
+code and HTML; the empty template stays minimal.
 
 ## Files
 
-- resource/config/style.json declares the primary font role and disabled-text color.
+- resource/config/style.json declares the primary font role and skin text colors.
 - resource/assets/fonts contains unmodified Chakra Petch regular (400) and bold (700)
   files, with OFL.txt. Source: [Google Fonts](https://github.com/google/fonts/tree/main/ofl/chakrapetch).
 - resource/config/locale.json enables English and selects en_US by default.
@@ -28,8 +28,32 @@ This ordering includes loading-screen Labels in the project font. The loading
 screen's startup messages stay in English because translations are not loaded yet.
 Templates do not implement live font/theme/language replacement.
 
+## HTML brand splash
+
+This splash is included in CLI 3.6.0, pending publication; npm CLI 3.5.0 lacks it.
+
+The game template's `web/index.html` presents `web/logo.png` beneath a small
+"Made with" caption. The mascot makes a gentle entrance, then repeats a playful
+hop and sway every 3.2 seconds while the entry module loads. Sparkles and a soft
+blue glow follow the loop. The splash has no loading text or progress indicator;
+the application's Preloader owns resource progress. Animations stop when the
+browser requests reduced motion. The logo size follows both viewport width and
+height for small screens and landscape.
+
+The HTML overlay fades out after the entry module evaluates, without a minimum
+display time or a wait for the entrance animation to finish. It does not wait
+for project font or resource loading. Customize the branding directly in the
+project's HTML. This template update applies to newly scaffolded game projects;
+existing project HTML is project-owned.
+
 ## Change fonts and colors
 
+The CLI 3.6.0 [default KUI skins](default-ui-skins.md) use Kurot-owned textures
+under resource/assets/ui/kui and a matching color palette. Registry CLI 3.5.0
+does not include this skin refresh. Skin state text colors compile from the
+project stylesheet; texture colors are baked into the PNG, without live palette
+switching. Templates inherit project fonts and retain the existing licensed files.
+
 Font keys such as primary produce stable aliases such as kurot-primary. Replace
 files and update style.json resource-relative paths, retaining weight 400 and
 unique weights. Default skins inherit the configured font; explicit Label fontFamily

package/docs/label-text-layout.md

@@ -1,6 +1,6 @@
 # Label text compilation
 
-CLI 3.4.0 consumes ui-document 0.12.x and compiles KUI text-fitting properties
+CLI 3.6.0 consumes ui-document ^0.13.0 and compiles KUI text-fitting properties
 through the existing UIDocument → SkinIR → ESM factory pipeline. The semantic
 document format remains version 2.
 
@@ -35,6 +35,8 @@ introduces build-time text measurement. See the
 ## Runtime boundary
 
 - The application must install UI `^3.1.0` and Core `^2.1.0` for shrinking.
+  These are the feature's original API minimums. Installing current UI 3.4.0
+  requires Core `^2.4.0` for that package's centered-flip contract.
   They remain application dependencies; CLI depends on the headless document
   package rather than importing the engine into the build process.
 - `textFit` is `none` by default or `shrink` for ordinary single-line Labels.

package/docs/text-components.md

@@ -1,9 +1,12 @@
 # BitmapLabel and RichLabel compilation
 
-CLI 3.4.0 uses published ui-document 0.12.0. Applications rendering these tags
+Native text compilation was introduced in CLI 3.4.0 with document 0.12.0.
+Current CLI 3.6.0 requires published ui-document ^0.13.0 and retains these tags.
+Applications rendering these tags
 must install UI `^3.3.0` and Core `^2.3.0`; Core 2.3.1 fixes unstyled blank
 rich-text line metrics. The CLI does not install or bundle its own Core/UI.
 Document format version 2 and existing project configuration are unchanged.
+Installing UI 3.4.0 requires Core ^2.4.0 for that package's centered-flip contract.
 
 ```xml
 <Skin xmlns="https://kurot.dev/ui/1" class="TextSkin" states="disabled">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kurot/cli",
-	"version": "3.5.0",
+	"version": "3.6.0",
 	"description": "Kurot CLI - build tool for Kurot Editor KUI XML workflows",
 	"author": "Kelvin <kyia.x52@gmail.com>",
 	"license": "MIT",

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>