From 21aa619bad740b97a996bacfbd9766eaa7f1612f Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sat, 1 Nov 2025 23:21:25 +0900 Subject: [PATCH 01/18] Add scripts module --- config/scripts/.gitignore | 7 +++++++ config/scripts/build.gradle.kts | 18 ++++++++++++++++++ config/scripts/src/main/AndroidManifest.xml | 2 ++ settings.gradle.kts | 2 ++ 4 files changed, 29 insertions(+) create mode 100644 config/scripts/.gitignore create mode 100644 config/scripts/build.gradle.kts create mode 100644 config/scripts/src/main/AndroidManifest.xml diff --git a/config/scripts/.gitignore b/config/scripts/.gitignore new file mode 100644 index 0000000..beac9d4 --- /dev/null +++ b/config/scripts/.gitignore @@ -0,0 +1,7 @@ +# Service Account credentials +*.json +service-account*.json + +# Translation config files (except example) +translations/* +!translations/example.properties diff --git a/config/scripts/build.gradle.kts b/config/scripts/build.gradle.kts new file mode 100644 index 0000000..80092e0 --- /dev/null +++ b/config/scripts/build.gradle.kts @@ -0,0 +1,18 @@ +plugins { + id("winter.kotlin.library") +} + +dependencies { + // Google Sheets API v4 + implementation("com.google.apis:google-api-services-sheets:v4-rev20220927-2.0.0") + + // Google Auth Library for Service Account + implementation("com.google.auth:google-auth-library-oauth2-http:1.40.0") + + // Required for JSON parsing by Google's libraries + implementation("com.google.code.gson:gson:2.13.2") + + // HTTP transport for Google API + implementation("com.google.http-client:google-http-client-jackson2:2.0.2") +} + diff --git a/config/scripts/src/main/AndroidManifest.xml b/config/scripts/src/main/AndroidManifest.xml new file mode 100644 index 0000000..1d26c87 --- /dev/null +++ b/config/scripts/src/main/AndroidManifest.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/settings.gradle.kts b/settings.gradle.kts index c8021df..373a535 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -10,3 +10,5 @@ include(":app") include(":core-android:design-system") include(":sample:common") include(":sample:design-system-catalog") + +include(":config:scripts") From 8417adb6616b72969c3b44940b93ada07ce1d887 Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sat, 1 Nov 2025 23:24:39 +0900 Subject: [PATCH 02/18] Add script - download translation sheet & convert as xml file --- config/scripts/build.gradle.kts | 18 ++ .../love/winter/scripts/UpdateTranslations.kt | 255 ++++++++++++++++++ .../scripts/translations/example.properties | 17 ++ 3 files changed, 290 insertions(+) create mode 100644 config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt create mode 100644 config/scripts/translations/example.properties diff --git a/config/scripts/build.gradle.kts b/config/scripts/build.gradle.kts index 80092e0..341423e 100644 --- a/config/scripts/build.gradle.kts +++ b/config/scripts/build.gradle.kts @@ -16,3 +16,21 @@ dependencies { implementation("com.google.http-client:google-http-client-jackson2:2.0.2") } +/** + * ./gradlew :config:scripts:updateTranslations -Pargs="example" + * ./gradlew :config:scripts:updateTranslations -Pargs="sample-app" + * ./gradlew :config:scripts:updateTranslations -Pargs="app" + */ +tasks.register("updateTranslations") { + group = "translation" + description = "Update translations from Google Sheets to Android strings.xml" + mainClass.set("dev.love.winter.scripts.UpdateTranslationsKt") + classpath = sourceSets["main"].runtimeClasspath + workingDir = rootProject.projectDir + + // Pass command line arguments to the script + val argsProperty = providers.gradleProperty("args") + if (argsProperty.isPresent) { + args(argsProperty.get().split(" ")) + } +} diff --git a/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt new file mode 100644 index 0000000..05c8cb3 --- /dev/null +++ b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt @@ -0,0 +1,255 @@ +@file:Suppress("MatchingDeclarationName") + +package dev.love.winter.scripts + +import com.google.api.client.googleapis.javanet.GoogleNetHttpTransport +import com.google.api.client.json.gson.GsonFactory +import com.google.api.services.sheets.v4.Sheets +import com.google.api.services.sheets.v4.SheetsScopes +import com.google.auth.http.HttpCredentialsAdapter +import com.google.auth.oauth2.ServiceAccountCredentials +import java.io.File +import java.io.FileInputStream +import java.io.FileWriter +import java.util.Properties +import kotlin.system.exitProcess + +data class ScriptConfig( + val spreadsheetId: String, + val sheetName: String, + val serviceAccountJsonPath: String, + val appModulePath: String, +) + +/** + * ./gradlew :config:scripts:updateTranslations -Pargs="example" + * ./gradlew :config:scripts:updateTranslations -Pargs="sample-app" + * ./gradlew :config:scripts:updateTranslations -Pargs="app" + */ +fun main(args: Array) { + if (args.isEmpty()) { + printUsage() + exitProcess(1) + } + + val config = loadConfigFromFile(args[0]) + runTranslationUpdate(config) +} + +fun loadConfigFromFile(configPathOrAppName: String): ScriptConfig { + val configFile = if (configPathOrAppName.endsWith(".properties")) { + File(configPathOrAppName) + } else { + File("config/scripts/translations/$configPathOrAppName.properties") + } + + check(configFile.exists()) { + "Config file not found: ${configFile.absolutePath}\n" + + "Available configs: ${File("config/scripts/translations").listFiles()?.joinToString { it.name } ?: "none"}" + } + + val properties = Properties() + FileInputStream(configFile).use { properties.load(it) } + + val configDir = configFile.parentFile + + return ScriptConfig( + spreadsheetId = properties.getProperty("spreadsheet.id") ?: error("Missing required property: spreadsheet.id"), + sheetName = properties.getProperty("sheet.name") ?: error("Missing required property: sheet.name"), + serviceAccountJsonPath = resolveFilePath( + path = properties.getProperty("service.account.json.path") ?: error("Missing required property: service.account.json.path"), + baseDir = configDir, + ), + appModulePath = properties.getProperty("app.module.path") + ?: error("Missing required property: app.module.path"), + ) +} + +fun resolveFilePath(path: String, baseDir: File): String { + val file = File(path) + return if (file.isAbsolute) { + path + } else { + File(baseDir, path).absolutePath + } +} + +fun runTranslationUpdate(config: ScriptConfig) { + try { + println("Starting translation update...") + println(" Spreadsheet ID: ${config.spreadsheetId}") + println(" Sheet Name: ${config.sheetName}") + println(" App Module: ${config.appModulePath}") + + val translationData = fetchTranslationsFromSheet(config) + val parsedData = parseTranslationData(translationData) + saveTranslationsAsXml(parsedData, config.appModulePath) + + println("✓ Translations successfully saved!") + println(" Languages: ${parsedData.languages.joinToString()}") + println(" Total keys: ${parsedData.translations.size}") + } catch (e: Exception) { + System.err.println("✗ Error occurred: ${e.message}") + exitProcess(1) + } +} + +fun printUsage() { + val availableConfigs = File("config/scripts/translations").listFiles() + ?.filter { it.extension == "properties" } + ?.map { it.nameWithoutExtension } + ?: emptyList() + + println( + """ + Usage: ./gradlew :config:scripts:updateTranslations --args="" + + Available configurations in translations/: + ${availableConfigs.joinToString("\n ") { "- $it" }} + + Examples: + # Use app config from translations/example.properties + ./gradlew :config:scripts:updateTranslations --args="example" + + # Use custom config file path + ./gradlew :config:scripts:updateTranslations --args="path/to/custom.properties" + + To add a new app configuration: + 1. Copy translations/example.properties to translations/your-app.properties + 2. Update the properties file with your app's settings + 3. Run: ./gradlew :config:scripts:updateTranslations --args="your-app" + """.trimIndent() + ) +} + +fun fetchTranslationsFromSheet(config: ScriptConfig): List> { + val credentials = ServiceAccountCredentials.fromStream( + FileInputStream(config.serviceAccountJsonPath) + ).createScoped(listOf(SheetsScopes.SPREADSHEETS_READONLY)) + + val httpTransport = GoogleNetHttpTransport.newTrustedTransport() + val jsonFactory = GsonFactory.getDefaultInstance() + + val sheetsService = Sheets.Builder( + httpTransport, + jsonFactory, + HttpCredentialsAdapter(credentials) + ) + .setApplicationName("Translation Update Script") + .build() + + val response = sheetsService.spreadsheets().values() + .get(config.spreadsheetId, config.sheetName) + .execute() + + val values = response.getValues() ?: emptyList() + check(values.isNotEmpty()) { "No data found in sheet: ${config.sheetName}" } + + return values +} + +data class TranslationData( + val languages: List, + val translations: List, +) + +data class TranslationEntry( + val key: String, + val values: Map, + val context: String?, +) + +fun parseTranslationData(data: List>): TranslationData { + check(data.isNotEmpty()) { "Translation data is empty" } + + val headers = data[0].map { it.toString() } + val keyIndex = headers.indexOf("key") + check(keyIndex >= 0) { "Missing 'key' column in spreadsheet" } + + val contextIndex = headers.indexOf("context").takeIf { it >= 0 } + + val languageColumns = headers.mapIndexedNotNull { index, header -> + if (header != "key" && header != "context" && header != "screen" && header.length <= 5) { + index to header + } else { + null + } + } + + check(languageColumns.isNotEmpty()) { "No language columns found in spreadsheet" } + + val languages = languageColumns.map { it.second } + val translations = data.drop(1).mapNotNull { row -> + if (row.size <= keyIndex) return@mapNotNull null + + val key = row[keyIndex].toString().trim() + if (key.isEmpty()) return@mapNotNull null + + val values = languageColumns.associate { (index, lang) -> + lang to (row.getOrNull(index)?.toString()?.trim() ?: "") + } + + val context = contextIndex?.let { row.getOrNull(it)?.toString()?.trim() } + + TranslationEntry( + key = key, + values = values, + context = context, + ) + } + + return TranslationData( + languages = languages, + translations = translations, + ) +} + +fun saveTranslationsAsXml(data: TranslationData, appModulePath: String) { + data.languages.forEach { language -> + val valuesDir = if (language == "en") { + File(appModulePath, "src/main/res/values") + } else { + File(appModulePath, "src/main/res/values-$language") + } + + valuesDir.mkdirs() + val stringsFile = File(valuesDir, "strings.xml") + + FileWriter(stringsFile).use { writer -> + writer.write("\n") + writer.write("\n") + + data.translations.forEach { entry -> + val value = entry.values[language] ?: "" + if (value.isNotEmpty()) { + if (!entry.context.isNullOrBlank()) { + writer.write(" \n") + } + val escapedValue = escapeXml(value) + writer.write(" $escapedValue\n") + } + } + + writer.write("\n") + } + + println(" ✓ ${stringsFile.relativeTo(File(appModulePath)).path}") + } +} + +fun escapeXml(text: String): String { + var result = text + .replace("&", "&") + .replace("<", "<") + .replace(">", ">") + .replace("\"", """) + .replace("'", "\\'") + .replace("\n", "\\n") + + // Escape @ symbol at the beginning of the string (Android resource reference) + if (result.startsWith("@")) { + result = "\\@${result.substring(1)}" + } + + return result +} diff --git a/config/scripts/translations/example.properties b/config/scripts/translations/example.properties new file mode 100644 index 0000000..c590125 --- /dev/null +++ b/config/scripts/translations/example.properties @@ -0,0 +1,17 @@ +# Example Translation Configuration +# Copy this file and rename it for each app (e.g., design-system-catalog.properties) + +# Google Spreadsheet ID (from URL) +# https://docs.google.com/spreadsheets/d/[THIS_PART]/edit +spreadsheet.id=YOUR_SPREADSHEET_ID_HERE + +# Sheet name (will fetch all data from this sheet) +sheet.name=Translations + +# Service Account JSON key file path (relative to this properties file or absolute path) +service.account.json.path=service-account.json + +# App module path (relative to project root) +# Example: sample/design-system-catalog +# Example: app +app.module.path=sample/design-system-catalog From eb926e68ae2b71a898d3ee29011253be93a4b8fa Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sat, 1 Nov 2025 23:24:49 +0900 Subject: [PATCH 03/18] Update translation --- .../common/src/main/res/values-ja/strings.xml | 56 ++++++++++++++++++ .../common/src/main/res/values-ko/strings.xml | 56 ++++++++++++++++++ .../common/src/main/res/values-th/strings.xml | 56 ++++++++++++++++++ .../common/src/main/res/values-vi/strings.xml | 56 ++++++++++++++++++ .../src/main/res/values-zh-CN/strings.xml | 56 ++++++++++++++++++ sample/common/src/main/res/values/strings.xml | 57 ++++++++++++++++++- 6 files changed, 335 insertions(+), 2 deletions(-) create mode 100644 sample/common/src/main/res/values-ja/strings.xml create mode 100644 sample/common/src/main/res/values-ko/strings.xml create mode 100644 sample/common/src/main/res/values-th/strings.xml create mode 100644 sample/common/src/main/res/values-vi/strings.xml create mode 100644 sample/common/src/main/res/values-zh-CN/strings.xml diff --git a/sample/common/src/main/res/values-ja/strings.xml b/sample/common/src/main/res/values-ja/strings.xml new file mode 100644 index 0000000..39a222b --- /dev/null +++ b/sample/common/src/main/res/values-ja/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + デザインシステム + + コンポーネントとスタイルの総合カタログ + + デザイントークン + + デザイントークン + + コンポーネント + + コンポーネント + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + オプション + カラーシステム + ディスプレイ + ディスプレイフォントスタイルは、大きな見出しや強調が必要な主要テキストに使用してください。ユーザーの注意を引き、力強い印象を与えるのに最適です。長いテキストには使用しないでください。 + タイトル + 카드 제목 + 本文 + 本文フォントスタイルは、段落や説明などの通常のテキストコンテンツに最適です。可読性と判読性が重要な長いテキストと短いテキストの両方に適しています。 + アクション + アクションフォントスタイルは、ボタン、入力フィールド、リンクなど、インタラクティブまたは実行可能なアイテムを表すテキスト要素に適しています。通常のテキストとインタラクティブ要素を区別するために使用してください。 + キャプション + キャプションフォントスタイルは、アイコン、画像、タグなどの視覚要素を補完し、コンテキストを提供する補助テキストに使用されます。長いテキストには使用しないでください。 + スペーシング + スペーシングトークンは、要素間の一貫した間隔と配置を保証し、より良い可読性、明確性、バランスを提供します。 + 使用方法 + スペーシングトークンを使用して、正しい階層でコンテンツを整理してください。可読性を高めるには、関連する要素をグループ化することが重要です。関連項目には小さい間隔値を使用し、無関係な項目間では間隔を広げることをお勧めします。 + 컴포넌트를 쌓을 때는 그룹 내 모든 요소 사이에 동일한 간격을 사용하세요. + ボーダー半径 + ボーダー半径トークンは、ボタン、カード、入力フィールド、コンテナなどの角が丸い要素に適用され、エッジを柔らかくし、より美しい外観を作成します。 + トークン + エクストラスモール + エクストラスモールは、非常に微妙な丸い角に使用してください。 + スモール + スモールは、最小の要素やネストされたコンポーネントに使用してください。 + ミディアム + ミディアムは、ほとんどのコンポーネントで使用されます。小型から中型のコンポーネントとコンテナに使用してください。 + ラージ + ラージは、中型から大型のコンポーネントとコンテナに使用してください。 + エクストララージ + エクストララージは、特にタブレット画面で最も大きな要素に使用してください。 + ピル + ピルは、両側が完全に丸いコンポーネントに使用してください。 + アイコン + アイコンは、アクションやコンポーネントに追加の意味を提供することで使いやすさを向上させ、視覚的により魅力的で理解しやすくするグラフィック資産です。 + アイコンの作成 + 新しいアイコンを作成する場合は、24pxのベースから始め、1.5pxのストロークを使用してアイコンを描いてください。一貫したアイコンをデザインするために、アイコングリッド（下記）を使用してください。 + diff --git a/sample/common/src/main/res/values-ko/strings.xml b/sample/common/src/main/res/values-ko/strings.xml new file mode 100644 index 0000000..9331013 --- /dev/null +++ b/sample/common/src/main/res/values-ko/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + 디자인 시스템 + + 컴포넌트와 스타일의 종합 카탈로그 + + 디자인 토큰 + + 디자인 토큰 + + 컴포넌트 + + 컴포넌트 + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + 옵션 + 컬러 시스템 + 디스플레이 + 디스플레이 폰트 스타일은 큰 제목이나 강조가 필요한 주요 텍스트에 사용하세요. 사용자의 시선을 끌고 강렬한 인상을 주기에 이상적입니다. 긴 텍스트에는 사용하지 마세요. + 타이틀 + 타이틀 폰트 스타일은 레이아웃을 압도하지 않으면서 명확한 시각적 계층이 필요할 때 사용하세요. 섹션 제목 + 본문 + 본문 폰트 스타일은 문단이나 설명과 같은 일반 텍스트 콘텐츠에 이상적입니다. 가독성과 판독성이 중요한 긴 텍스트와 짧은 텍스트 모두에 적합합니다. + 액션 + 액션 폰트 스타일은 버튼, 입력 필드, 링크와 같이 상호작용하거나 실행 가능한 항목을 나타내는 텍스트 요소에 적합합니다. 일반 텍스트와 상호작용 요소를 구분하는 데 사용하세요. + 캡션 + 캡션 폰트 스타일은 아이콘, 이미지, 태그 등 시각적 요소를 보완하고 맥락을 제공하는 보조 텍스트에 사용됩니다. 긴 텍스트에는 사용하지 마세요. + 간격 + 간격 토큰은 요소 간 일관된 간격과 정렬을 보장하며, 더 나은 가독성, 명확성, 균형을 제공합니다. + 사용법 + 간격 토큰을 사용하여 올바른 계층 구조로 콘텐츠를 구성하세요. 가독성을 높이려면 관련 요소를 그룹화하는 것이 중요합니다. 관련된 항목은 작은 간격 값을 사용하고, 관련 없는 항목 사이에는 간격을 늘리는 것이 좋습니다. + use the same spacing between all elements in the group. + 모서리 반경 + 모서리 반경 토큰은 버튼, 카드, 입력 필드, 컨테이너 등 둥근 모서리를 가진 요소에 적용되어 가장자리를 부드럽게 하고 더 보기 좋은 외관을 만듭니다. + 토큰 + 엑스트라 스몰 + 엑스트라 스몰은 매우 미묘한 둥근 모서리에 사용하세요. + 스몰 + 스몰은 가장 작은 요소나 중첩된 컴포넌트에 사용하세요. + 미디엄 + 미디엄은 대부분의 컴포넌트에 사용됩니다. 소형에서 중형 컴포넌트 및 컨테이너에 사용하세요. + 라지 + 라지는 중형에서 대형 컴포넌트 및 컨테이너에 사용하세요. + 엑스트라 라지 + 엑스트라 라지는 가장 큰 요소, 특히 태블릿 화면에서 사용하세요. + 필 + 필은 양쪽이 완전히 둥근 컴포넌트에 사용하세요. + 아이콘 + 아이콘은 액션과 컴포넌트에 추가적인 의미를 제공하여 사용성을 향상시키고, 시각적으로 더 매력적이며 이해하기 쉽게 만드는 그래픽 자산입니다. + 아이콘 만들기 + 새 아이콘을 만들 때는 24px 베이스로 시작하고 1.5px 스트로크를 사용하여 아이콘을 그리세요. 일관된 아이콘을 디자인하는 데 도움이 되도록 아이콘 그리드(아래 표시)를 사용하세요. + diff --git a/sample/common/src/main/res/values-th/strings.xml b/sample/common/src/main/res/values-th/strings.xml new file mode 100644 index 0000000..28ebec1 --- /dev/null +++ b/sample/common/src/main/res/values-th/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + ระบบดีไซน์ + + แคตตาล็อกที่ครอบคลุมของคอมโพเนนต์และสไตล์ + + โทเค็นดีไซน์ + + โทเค็นดีไซน์ + + คอมโพเนนต์ + + คอมโพเนนต์ + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + ตัวเลือก + ระบบสี + หน้าจอแสดงผล + ใช้สไตล์ฟอนต์แบบดิสเพลย์สำหรับหัวข้อใหญ่หรือข้อความที่โดดเด่นซึ่งต้องการการเน้น ดิสเพลย์เหมาะสำหรับดึงดูดความสนใจของผู้ใช้และสร้างความประทับใจที่แข็งแกร่ง หลีกเลี่ยงการใช้สไตล์นี้สำหรับข้อความยาว + หัวข้อ + ใช้สไตล์ฟอนต์หัวข้อเมื่อคุณต้องการลำดับชั้นภาพที่ชัดเจนโดยไม่ทำให้เลย์เอาต์ดูแน่นเกินไป คุณสามารถใช้สไตล์นี้ในข้อความสั้นที่จำเป็นต้องโดดเด่นเมื่อเปรียบเทียบกับข้อความเนื้อหา เช่น หัวข้อส่วน หัวข้อการ์ด หัวข้อหน้า ฯลฯ + เนื้อหา + สไตล์ฟอนต์เนื้อหาเหมาะสำหรับเนื้อหาข้อความปกติ เช่น ย่อหน้าหรือคำอธิบาย สไตล์เนื้อหาเหมาะสำหรับทั้งข้อความยาวและสั้น ซึ่งความสามารถในการอ่านและความชัดเจนเป็นสิ่งสำคัญ + การกระทำ + สไตล์ฟอนต์การกระทำเหมาะสำหรับองค์ประกอบข้อความที่แสดงรายการเชิงโต้ตอบหรือสามารถดำเนินการได้ เช่น ปุ่ม ช่องป้อนข้อมูล และลิงก์ ใช้เพื่อแยกองค์ประกอบเชิงโต้ตอบจากข้อความปกติ + คำอธิบาย + สไตล์ฟอนต์คำอธิบายใช้สำหรับข้อความสนับสนุนที่ให้บริบทและเสริมองค์ประกอบภาพ เช่น ไอคอน รูปภาพ แท็ก ฯลฯ หลีกเลี่ยงการใช้สไตล์นี้ในข้อความยาว + ระยะห่าง + โทเค็นระยะห่างรับประกันระยะห่างและการจัดตำแหน่งที่สอดคล้องกันระหว่างองค์ประกอบ ในขณะที่ให้ความสามารถในการอ่าน ความชัดเจน และความสมดุลที่ดีขึ้น + การใช้งาน + ใช้โทเค็นระยะห่างเพื่อจัดระเบียบเนื้อหาภายใต้ลำดับชั้นที่ถูกต้อง สิ่งสำคัญคือการจัดกลุ่มองค์ประกอบที่เกี่ยวข้องเพื่อเพิ่มความสามารถในการอ่าน สำหรับรายการที่เกี่ยวข้อง ให้ใช้ค่าระยะห่างที่เล็กกว่า ในขณะที่ระหว่างรายการที่ไม่เกี่ยวข้อง ควรเพิ่มระยะห่าง + เมื่อซ้อนคอมโพเนนต์ ให้ใช้ระยะห่างเดียวกันระหว่างองค์ประกอบทั้งหมดในกลุ่ม + รัศมีขอบ + โทเค็นรัศมีขอบถูกนำไปใช้กับองค์ประกอบที่มีมุมโค้งมน เช่น ปุ่ม การ์ด ช่องป้อนข้อมูล และคอนเทนเนอร์ เพื่อทำให้ขอบนุ่มนวลและสร้างรูปลักษณ์ที่น่าดูยิ่งขึ้น + โทเค็น + เล็กพิเศษ + ใช้เล็กพิเศษสำหรับมุมโค้งมนที่ละเอียดอ่อนมาก + เล็ก + ใช้เล็กสำหรับองค์ประกอบที่เล็กที่สุดหรือคอมโพเนนต์ที่ซ้อนกัน + กลาง + รูปแบบกลางถูกใช้ในคอมโพเนนต์ส่วนใหญ่ ใช้ในคอมโพเนนต์และคอนเทนเนอร์ขนาดเล็กถึงกลาง + ใหญ่ + ใช้ใหญ่สำหรับคอมโพเนนต์และคอนเทนเนอร์ขนาดกลางถึงใหญ่ + ใหญ่พิเศษ + ใช้ใหญ่พิเศษสำหรับองค์ประกอบที่ใหญ่ที่สุด โดยเฉพาะบนหน้าจอแท็บเล็ต + เม็ด + ใช้เม็ดสำหรับคอมโพเนนต์ที่โค้งมนอย่างสมบูรณ์ที่ด้านข้าง + ไอคอน + ไอคอนเป็นทรัพย์สินกราฟิกที่ปรับปรุงการใช้งานโดยให้ความหมายเพิ่มเติมแก่การกระทำและคอมโพเนนต์ ทำให้มีความน่าสนใจทางสายตามากขึ้นและเข้าใจง่ายขึ้น + สร้างไอคอน + เมื่อสร้างไอคอนใหม่ ให้เริ่มต้นด้วยฐาน 24px และวาดไอคอนโดยใช้เส้นขนาด 1.5px ใช้ตารางไอคอน (แสดงด้านล่าง) เพื่อช่วยคุณออกแบบไอคอนที่สอดคล้องกัน + diff --git a/sample/common/src/main/res/values-vi/strings.xml b/sample/common/src/main/res/values-vi/strings.xml new file mode 100644 index 0000000..f666f1a --- /dev/null +++ b/sample/common/src/main/res/values-vi/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + Hệ thống thiết kế + + Danh mục toàn diện về các thành phần và phong cách + + Token thiết kế + + Token thiết kế + + Thành phần + + Thành phần + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + Tùy chọn + Hệ thống màu sắc + Hiển thị + Sử dụng kiểu phông chữ hiển thị cho các tiêu đề lớn hoặc văn bản nổi bật cần nhấn mạnh. Hiển thị rất lý tưởng để thu hút sự chú ý của người dùng và tạo ra tuyên bố táo bạo. Tránh sử dụng kiểu này cho văn bản dài. + Tiêu đề + Sử dụng kiểu phông chữ tiêu đề khi bạn cần một hệ thống phân cấp trực quan rõ ràng mà không làm choáng ngợp bố cục. Bạn có thể áp dụng kiểu này trong các văn bản ngắn cần nổi bật so với văn bản nội dung, như tiêu đề phần, tiêu đề thẻ, tiêu đề trang, v.v. + Nội dung + Kiểu phông chữ nội dung lý tưởng cho nội dung văn bản thông thường, chẳng hạn như đoạn văn hoặc mô tả. Kiểu nội dung phù hợp cho cả văn bản dài và ngắn, nơi khả năng đọc và dễ đọc là điều cần thiết. + Hành động + Kiểu phông chữ hành động phù hợp cho các phần tử văn bản đại diện cho các mục tương tác hoặc có thể thực hiện, chẳng hạn như nút, trường nhập liệu và liên kết. Sử dụng nó để phân biệt các phần tử tương tác với văn bản thông thường. + Chú thích + Kiểu phông chữ chú thích được sử dụng cho văn bản hỗ trợ cung cấp ngữ cảnh và bổ sung cho các yếu tố trực quan, như biểu tượng, hình ảnh, thẻ, v.v. Tránh sử dụng kiểu này trong văn bản dài. + Khoảng cách + Token khoảng cách đảm bảo khoảng cách và căn chỉnh nhất quán giữa các phần tử đồng thời cung cấp khả năng đọc, rõ ràng và cân bằng tốt hơn. + Cách sử dụng + Sử dụng token khoảng cách để sắp xếp nội dung theo đúng hệ thống phân cấp. Điều quan trọng là nhóm các phần tử liên quan để tăng khả năng đọc. Đối với các mục liên quan, sử dụng giá trị khoảng cách nhỏ hơn. Trong khi giữa các mục không liên quan, tốt hơn là tăng khoảng cách. + Khi xếp chồng các thành phần, hãy sử dụng cùng một khoảng cách giữa tất cả các phần tử trong nhóm. + Bán kính viền + Token bán kính viền được áp dụng cho các phần tử có góc bo tròn, chẳng hạn như nút, thẻ, trường nhập liệu và vùng chứa, để làm mềm các cạnh của chúng và tạo ra vẻ ngoài dễ chịu hơn. + Token + Rất nhỏ + Sử dụng Rất nhỏ cho các góc bo tròn rất tinh tế. + Nhỏ + Sử dụng Nhỏ cho các phần tử nhỏ nhất hoặc các thành phần lồng nhau. + Trung bình + Biến thể Trung bình được sử dụng trong hầu hết các thành phần. Sử dụng nó trong các thành phần và vùng chứa từ nhỏ đến trung bình. + Lớn + Sử dụng Lớn cho các thành phần và vùng chứa từ trung bình đến lớn. + Rất lớn + Sử dụng Rất lớn cho các phần tử lớn nhất, đặc biệt là trên màn hình máy tính bảng. + Viên thuốc + Sử dụng Viên thuốc cho các thành phần có các cạnh hoàn toàn tròn. + Biểu tượng + Biểu tượng là tài sản đồ họa giúp cải thiện khả năng sử dụng bằng cách cung cấp ý nghĩa bổ sung cho các hành động và thành phần, làm cho chúng hấp dẫn hơn về mặt thị giác và dễ hiểu hơn. + Tạo biểu tượng + Khi tạo biểu tượng mới, hãy bắt đầu với cơ sở 24px và vẽ biểu tượng bằng nét 1.5px. Sử dụng lưới Biểu tượng (được thể hiện bên dưới) để giúp bạn thiết kế các biểu tượng nhất quán. + diff --git a/sample/common/src/main/res/values-zh-CN/strings.xml b/sample/common/src/main/res/values-zh-CN/strings.xml new file mode 100644 index 0000000..d1ff0b5 --- /dev/null +++ b/sample/common/src/main/res/values-zh-CN/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + 设计系统 + + 组件和样式的综合目录 + + 设计令牌 + + 设计令牌 + + 组件 + + 组件 + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + 选项 + 颜色系统 + 显示 + 显示字体样式用于大标题或需要强调的突出文本。显示非常适合吸引用户注意力并做出大胆的声明。避免在长文本中使用此样式。 + 标题 + 当您需要清晰的视觉层次而不会使布局过于复杂时，请使用标题字体样式。您可以将此样式应用于需要与正文文本区分开来的短文本，例如章节标题、卡片标题、页面标题等。 + 正文 + 正文字体样式非常适合常规文本内容，例如段落或描述。正文样式适用于长文本和短文本，其中可读性和易读性至关重要。 + 操作 + 操作字体样式适用于表示交互或可操作项目的文本元素，例如按钮、输入框和链接。使用它来区分交互元素和常规文本。 + 说明文字 + 说明文字字体样式用于提供上下文并补充视觉元素的辅助文本，如图标、图像、标签等。避免在长文本中使用此样式。 + 间距 + 间距令牌保证元素之间的间距和对齐一致，同时提供更好的可读性、清晰度和平衡性。 + 使用方法 + 使用间距令牌在正确的层次结构下组织内容。对相关元素进行分组以提高可读性非常重要。对于相关项目，使用较小的间距值。而对于不相关的项目之间，最好增加间距。 + 堆叠组件时，在组中的所有元素之间使用相同的间距。 + 边框半径 + 边框半径令牌应用于具有圆角的元素，例如按钮、卡片、输入字段和容器，以软化其边缘并创建更令人愉悦的外观。 + 令牌 + 超小 + 超小用于非常微妙的圆角。 + 小 + 小用于最小的元素或嵌套组件。 + 中 + 中等变体用于大多数组件。将其用于中小型组件和容器。 + 大 + 大用于中大型组件和容器。 + 超大 + 超大用于最大的元素，特别是在平板电脑屏幕上。 + 胶囊 + 胶囊用于两侧完全圆润的组件。 + 图标 + 图标是通过为操作和组件提供额外含义来提高可用性的图形资源，使其更具视觉吸引力且更易于理解。 + 创建图标 + 创建新图标时，从24px的基础开始，并使用1.5px笔画绘制图标。使用图标网格（如下所示）帮助您设计一致的图标。 + diff --git a/sample/common/src/main/res/values/strings.xml b/sample/common/src/main/res/values/strings.xml index a07aaa6..dbfc689 100644 --- a/sample/common/src/main/res/values/strings.xml +++ b/sample/common/src/main/res/values/strings.xml @@ -1,3 +1,56 @@ + - Sample app common - \ No newline at end of file + + LanguageStudy + + Design System + + A comprehensive catalog of components and styles + + Design tokens + + Design token + + Component + + Components + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + Option + Color System + Display + Use the display font style for large headings or prominent text that requires emphasis. Display is ideal for grabbing the user\'s attention and making a bold statement. Avoid using this style for long texts. + Title + Use the title font style when you need a clear visual hierarchy without overwhelming the layout. You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc. + Body + The body font style is ideal for regular text content, such as paragraphs, or descriptions. The body styles are suitable both for long and short text, where readability and legibility are essential. + Action + The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. Use it to distinguish interactive elements from regular text. + Caption + The caption font style is used for supporting text that provides context and complements visual elements, like icons, images, tags, etc. Avoid using this style in long texts. + Spacing + Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance. + Usage + Use the spacing tokens to organize the content under the correct hierarchy.\n\nIt\'s important to group related elements to increase readability.\n\nFor related items, use smaller spacing values. While between unrelated items, it\'s better to increase the spacing. + When stacking components + Border radius + Border radius tokens are applied to elements with rounded corners, such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance. + Tokens + Extra Small + Use Extra small for very subtle rounded corners. + Small + Use Small for the smallest elements or nested components. + Medium + The Medium variation is used in most components. Use it in small-to-medium components and containers. + Large + Use Large for medium-to-large components and containers. + Extra Large + Use Extra Large for the biggest elements, especially on tablet screens. + Pill + Use Pill for the components that are completely rounded on their sides. + Icons + Icons are graphic assets that improve usability by providing extra meaning to actions and components, making them more visually appealing and easier to understand. + Creating an icon + When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. Use the Icon grid (represented below) to help you design consistent icons. + From ce72e6f5e37e7453c98eb13c32c1a3a426430754 Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sat, 1 Nov 2025 23:33:54 +0900 Subject: [PATCH 04/18] Fix invalid directory --- .../love/winter/scripts/UpdateTranslations.kt | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt index 05c8cb3..0e181e3 100644 --- a/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt +++ b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt @@ -204,12 +204,26 @@ fun parseTranslationData(data: List>): TranslationData { ) } +fun convertToAndroidResourceQualifier(languageCode: String): String { + val parts = languageCode.split("-") + return when (parts.size) { + 1 -> parts[0].lowercase() + 2 -> { + val language = parts[0].lowercase() + val region = parts[1].uppercase() + "$language-r$region" + } + else -> languageCode.lowercase() + } +} + fun saveTranslationsAsXml(data: TranslationData, appModulePath: String) { data.languages.forEach { language -> + val androidLanguageCode = convertToAndroidResourceQualifier(language) val valuesDir = if (language == "en") { File(appModulePath, "src/main/res/values") } else { - File(appModulePath, "src/main/res/values-$language") + File(appModulePath, "src/main/res/values-$androidLanguageCode") } valuesDir.mkdirs() From 2554bd0981b667c9daaf48a2592e9575f7715617 Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sat, 1 Nov 2025 23:34:11 +0900 Subject: [PATCH 05/18] Update translation --- .../src/main/res/values-ja/strings.xml | 56 +++++++++++++++++++ .../src/main/res/values-ko/strings.xml | 56 +++++++++++++++++++ .../src/main/res/values-th/strings.xml | 56 +++++++++++++++++++ .../src/main/res/values-vi/strings.xml | 56 +++++++++++++++++++ .../src/main/res/values-zh-rCN}/strings.xml | 0 .../src/main/res/values/strings.xml | 56 +++++++++++++++++++ 6 files changed, 280 insertions(+) create mode 100644 sample/design-system-catalog/src/main/res/values-ja/strings.xml create mode 100644 sample/design-system-catalog/src/main/res/values-ko/strings.xml create mode 100644 sample/design-system-catalog/src/main/res/values-th/strings.xml create mode 100644 sample/design-system-catalog/src/main/res/values-vi/strings.xml rename sample/{common/src/main/res/values-zh-CN => design-system-catalog/src/main/res/values-zh-rCN}/strings.xml (100%) create mode 100644 sample/design-system-catalog/src/main/res/values/strings.xml diff --git a/sample/design-system-catalog/src/main/res/values-ja/strings.xml b/sample/design-system-catalog/src/main/res/values-ja/strings.xml new file mode 100644 index 0000000..39a222b --- /dev/null +++ b/sample/design-system-catalog/src/main/res/values-ja/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + デザインシステム + + コンポーネントとスタイルの総合カタログ + + デザイントークン + + デザイントークン + + コンポーネント + + コンポーネント + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + オプション + カラーシステム + ディスプレイ + ディスプレイフォントスタイルは、大きな見出しや強調が必要な主要テキストに使用してください。ユーザーの注意を引き、力強い印象を与えるのに最適です。長いテキストには使用しないでください。 + タイトル + 카드 제목 + 本文 + 本文フォントスタイルは、段落や説明などの通常のテキストコンテンツに最適です。可読性と判読性が重要な長いテキストと短いテキストの両方に適しています。 + アクション + アクションフォントスタイルは、ボタン、入力フィールド、リンクなど、インタラクティブまたは実行可能なアイテムを表すテキスト要素に適しています。通常のテキストとインタラクティブ要素を区別するために使用してください。 + キャプション + キャプションフォントスタイルは、アイコン、画像、タグなどの視覚要素を補完し、コンテキストを提供する補助テキストに使用されます。長いテキストには使用しないでください。 + スペーシング + スペーシングトークンは、要素間の一貫した間隔と配置を保証し、より良い可読性、明確性、バランスを提供します。 + 使用方法 + スペーシングトークンを使用して、正しい階層でコンテンツを整理してください。可読性を高めるには、関連する要素をグループ化することが重要です。関連項目には小さい間隔値を使用し、無関係な項目間では間隔を広げることをお勧めします。 + 컴포넌트를 쌓을 때는 그룹 내 모든 요소 사이에 동일한 간격을 사용하세요. + ボーダー半径 + ボーダー半径トークンは、ボタン、カード、入力フィールド、コンテナなどの角が丸い要素に適用され、エッジを柔らかくし、より美しい外観を作成します。 + トークン + エクストラスモール + エクストラスモールは、非常に微妙な丸い角に使用してください。 + スモール + スモールは、最小の要素やネストされたコンポーネントに使用してください。 + ミディアム + ミディアムは、ほとんどのコンポーネントで使用されます。小型から中型のコンポーネントとコンテナに使用してください。 + ラージ + ラージは、中型から大型のコンポーネントとコンテナに使用してください。 + エクストララージ + エクストララージは、特にタブレット画面で最も大きな要素に使用してください。 + ピル + ピルは、両側が完全に丸いコンポーネントに使用してください。 + アイコン + アイコンは、アクションやコンポーネントに追加の意味を提供することで使いやすさを向上させ、視覚的により魅力的で理解しやすくするグラフィック資産です。 + アイコンの作成 + 新しいアイコンを作成する場合は、24pxのベースから始め、1.5pxのストロークを使用してアイコンを描いてください。一貫したアイコンをデザインするために、アイコングリッド（下記）を使用してください。 + diff --git a/sample/design-system-catalog/src/main/res/values-ko/strings.xml b/sample/design-system-catalog/src/main/res/values-ko/strings.xml new file mode 100644 index 0000000..9331013 --- /dev/null +++ b/sample/design-system-catalog/src/main/res/values-ko/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + 디자인 시스템 + + 컴포넌트와 스타일의 종합 카탈로그 + + 디자인 토큰 + + 디자인 토큰 + + 컴포넌트 + + 컴포넌트 + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + 옵션 + 컬러 시스템 + 디스플레이 + 디스플레이 폰트 스타일은 큰 제목이나 강조가 필요한 주요 텍스트에 사용하세요. 사용자의 시선을 끌고 강렬한 인상을 주기에 이상적입니다. 긴 텍스트에는 사용하지 마세요. + 타이틀 + 타이틀 폰트 스타일은 레이아웃을 압도하지 않으면서 명확한 시각적 계층이 필요할 때 사용하세요. 섹션 제목 + 본문 + 본문 폰트 스타일은 문단이나 설명과 같은 일반 텍스트 콘텐츠에 이상적입니다. 가독성과 판독성이 중요한 긴 텍스트와 짧은 텍스트 모두에 적합합니다. + 액션 + 액션 폰트 스타일은 버튼, 입력 필드, 링크와 같이 상호작용하거나 실행 가능한 항목을 나타내는 텍스트 요소에 적합합니다. 일반 텍스트와 상호작용 요소를 구분하는 데 사용하세요. + 캡션 + 캡션 폰트 스타일은 아이콘, 이미지, 태그 등 시각적 요소를 보완하고 맥락을 제공하는 보조 텍스트에 사용됩니다. 긴 텍스트에는 사용하지 마세요. + 간격 + 간격 토큰은 요소 간 일관된 간격과 정렬을 보장하며, 더 나은 가독성, 명확성, 균형을 제공합니다. + 사용법 + 간격 토큰을 사용하여 올바른 계층 구조로 콘텐츠를 구성하세요. 가독성을 높이려면 관련 요소를 그룹화하는 것이 중요합니다. 관련된 항목은 작은 간격 값을 사용하고, 관련 없는 항목 사이에는 간격을 늘리는 것이 좋습니다. + use the same spacing between all elements in the group. + 모서리 반경 + 모서리 반경 토큰은 버튼, 카드, 입력 필드, 컨테이너 등 둥근 모서리를 가진 요소에 적용되어 가장자리를 부드럽게 하고 더 보기 좋은 외관을 만듭니다. + 토큰 + 엑스트라 스몰 + 엑스트라 스몰은 매우 미묘한 둥근 모서리에 사용하세요. + 스몰 + 스몰은 가장 작은 요소나 중첩된 컴포넌트에 사용하세요. + 미디엄 + 미디엄은 대부분의 컴포넌트에 사용됩니다. 소형에서 중형 컴포넌트 및 컨테이너에 사용하세요. + 라지 + 라지는 중형에서 대형 컴포넌트 및 컨테이너에 사용하세요. + 엑스트라 라지 + 엑스트라 라지는 가장 큰 요소, 특히 태블릿 화면에서 사용하세요. + 필 + 필은 양쪽이 완전히 둥근 컴포넌트에 사용하세요. + 아이콘 + 아이콘은 액션과 컴포넌트에 추가적인 의미를 제공하여 사용성을 향상시키고, 시각적으로 더 매력적이며 이해하기 쉽게 만드는 그래픽 자산입니다. + 아이콘 만들기 + 새 아이콘을 만들 때는 24px 베이스로 시작하고 1.5px 스트로크를 사용하여 아이콘을 그리세요. 일관된 아이콘을 디자인하는 데 도움이 되도록 아이콘 그리드(아래 표시)를 사용하세요. + diff --git a/sample/design-system-catalog/src/main/res/values-th/strings.xml b/sample/design-system-catalog/src/main/res/values-th/strings.xml new file mode 100644 index 0000000..28ebec1 --- /dev/null +++ b/sample/design-system-catalog/src/main/res/values-th/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + ระบบดีไซน์ + + แคตตาล็อกที่ครอบคลุมของคอมโพเนนต์และสไตล์ + + โทเค็นดีไซน์ + + โทเค็นดีไซน์ + + คอมโพเนนต์ + + คอมโพเนนต์ + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + ตัวเลือก + ระบบสี + หน้าจอแสดงผล + ใช้สไตล์ฟอนต์แบบดิสเพลย์สำหรับหัวข้อใหญ่หรือข้อความที่โดดเด่นซึ่งต้องการการเน้น ดิสเพลย์เหมาะสำหรับดึงดูดความสนใจของผู้ใช้และสร้างความประทับใจที่แข็งแกร่ง หลีกเลี่ยงการใช้สไตล์นี้สำหรับข้อความยาว + หัวข้อ + ใช้สไตล์ฟอนต์หัวข้อเมื่อคุณต้องการลำดับชั้นภาพที่ชัดเจนโดยไม่ทำให้เลย์เอาต์ดูแน่นเกินไป คุณสามารถใช้สไตล์นี้ในข้อความสั้นที่จำเป็นต้องโดดเด่นเมื่อเปรียบเทียบกับข้อความเนื้อหา เช่น หัวข้อส่วน หัวข้อการ์ด หัวข้อหน้า ฯลฯ + เนื้อหา + สไตล์ฟอนต์เนื้อหาเหมาะสำหรับเนื้อหาข้อความปกติ เช่น ย่อหน้าหรือคำอธิบาย สไตล์เนื้อหาเหมาะสำหรับทั้งข้อความยาวและสั้น ซึ่งความสามารถในการอ่านและความชัดเจนเป็นสิ่งสำคัญ + การกระทำ + สไตล์ฟอนต์การกระทำเหมาะสำหรับองค์ประกอบข้อความที่แสดงรายการเชิงโต้ตอบหรือสามารถดำเนินการได้ เช่น ปุ่ม ช่องป้อนข้อมูล และลิงก์ ใช้เพื่อแยกองค์ประกอบเชิงโต้ตอบจากข้อความปกติ + คำอธิบาย + สไตล์ฟอนต์คำอธิบายใช้สำหรับข้อความสนับสนุนที่ให้บริบทและเสริมองค์ประกอบภาพ เช่น ไอคอน รูปภาพ แท็ก ฯลฯ หลีกเลี่ยงการใช้สไตล์นี้ในข้อความยาว + ระยะห่าง + โทเค็นระยะห่างรับประกันระยะห่างและการจัดตำแหน่งที่สอดคล้องกันระหว่างองค์ประกอบ ในขณะที่ให้ความสามารถในการอ่าน ความชัดเจน และความสมดุลที่ดีขึ้น + การใช้งาน + ใช้โทเค็นระยะห่างเพื่อจัดระเบียบเนื้อหาภายใต้ลำดับชั้นที่ถูกต้อง สิ่งสำคัญคือการจัดกลุ่มองค์ประกอบที่เกี่ยวข้องเพื่อเพิ่มความสามารถในการอ่าน สำหรับรายการที่เกี่ยวข้อง ให้ใช้ค่าระยะห่างที่เล็กกว่า ในขณะที่ระหว่างรายการที่ไม่เกี่ยวข้อง ควรเพิ่มระยะห่าง + เมื่อซ้อนคอมโพเนนต์ ให้ใช้ระยะห่างเดียวกันระหว่างองค์ประกอบทั้งหมดในกลุ่ม + รัศมีขอบ + โทเค็นรัศมีขอบถูกนำไปใช้กับองค์ประกอบที่มีมุมโค้งมน เช่น ปุ่ม การ์ด ช่องป้อนข้อมูล และคอนเทนเนอร์ เพื่อทำให้ขอบนุ่มนวลและสร้างรูปลักษณ์ที่น่าดูยิ่งขึ้น + โทเค็น + เล็กพิเศษ + ใช้เล็กพิเศษสำหรับมุมโค้งมนที่ละเอียดอ่อนมาก + เล็ก + ใช้เล็กสำหรับองค์ประกอบที่เล็กที่สุดหรือคอมโพเนนต์ที่ซ้อนกัน + กลาง + รูปแบบกลางถูกใช้ในคอมโพเนนต์ส่วนใหญ่ ใช้ในคอมโพเนนต์และคอนเทนเนอร์ขนาดเล็กถึงกลาง + ใหญ่ + ใช้ใหญ่สำหรับคอมโพเนนต์และคอนเทนเนอร์ขนาดกลางถึงใหญ่ + ใหญ่พิเศษ + ใช้ใหญ่พิเศษสำหรับองค์ประกอบที่ใหญ่ที่สุด โดยเฉพาะบนหน้าจอแท็บเล็ต + เม็ด + ใช้เม็ดสำหรับคอมโพเนนต์ที่โค้งมนอย่างสมบูรณ์ที่ด้านข้าง + ไอคอน + ไอคอนเป็นทรัพย์สินกราฟิกที่ปรับปรุงการใช้งานโดยให้ความหมายเพิ่มเติมแก่การกระทำและคอมโพเนนต์ ทำให้มีความน่าสนใจทางสายตามากขึ้นและเข้าใจง่ายขึ้น + สร้างไอคอน + เมื่อสร้างไอคอนใหม่ ให้เริ่มต้นด้วยฐาน 24px และวาดไอคอนโดยใช้เส้นขนาด 1.5px ใช้ตารางไอคอน (แสดงด้านล่าง) เพื่อช่วยคุณออกแบบไอคอนที่สอดคล้องกัน + diff --git a/sample/design-system-catalog/src/main/res/values-vi/strings.xml b/sample/design-system-catalog/src/main/res/values-vi/strings.xml new file mode 100644 index 0000000..f666f1a --- /dev/null +++ b/sample/design-system-catalog/src/main/res/values-vi/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + Hệ thống thiết kế + + Danh mục toàn diện về các thành phần và phong cách + + Token thiết kế + + Token thiết kế + + Thành phần + + Thành phần + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + Tùy chọn + Hệ thống màu sắc + Hiển thị + Sử dụng kiểu phông chữ hiển thị cho các tiêu đề lớn hoặc văn bản nổi bật cần nhấn mạnh. Hiển thị rất lý tưởng để thu hút sự chú ý của người dùng và tạo ra tuyên bố táo bạo. Tránh sử dụng kiểu này cho văn bản dài. + Tiêu đề + Sử dụng kiểu phông chữ tiêu đề khi bạn cần một hệ thống phân cấp trực quan rõ ràng mà không làm choáng ngợp bố cục. Bạn có thể áp dụng kiểu này trong các văn bản ngắn cần nổi bật so với văn bản nội dung, như tiêu đề phần, tiêu đề thẻ, tiêu đề trang, v.v. + Nội dung + Kiểu phông chữ nội dung lý tưởng cho nội dung văn bản thông thường, chẳng hạn như đoạn văn hoặc mô tả. Kiểu nội dung phù hợp cho cả văn bản dài và ngắn, nơi khả năng đọc và dễ đọc là điều cần thiết. + Hành động + Kiểu phông chữ hành động phù hợp cho các phần tử văn bản đại diện cho các mục tương tác hoặc có thể thực hiện, chẳng hạn như nút, trường nhập liệu và liên kết. Sử dụng nó để phân biệt các phần tử tương tác với văn bản thông thường. + Chú thích + Kiểu phông chữ chú thích được sử dụng cho văn bản hỗ trợ cung cấp ngữ cảnh và bổ sung cho các yếu tố trực quan, như biểu tượng, hình ảnh, thẻ, v.v. Tránh sử dụng kiểu này trong văn bản dài. + Khoảng cách + Token khoảng cách đảm bảo khoảng cách và căn chỉnh nhất quán giữa các phần tử đồng thời cung cấp khả năng đọc, rõ ràng và cân bằng tốt hơn. + Cách sử dụng + Sử dụng token khoảng cách để sắp xếp nội dung theo đúng hệ thống phân cấp. Điều quan trọng là nhóm các phần tử liên quan để tăng khả năng đọc. Đối với các mục liên quan, sử dụng giá trị khoảng cách nhỏ hơn. Trong khi giữa các mục không liên quan, tốt hơn là tăng khoảng cách. + Khi xếp chồng các thành phần, hãy sử dụng cùng một khoảng cách giữa tất cả các phần tử trong nhóm. + Bán kính viền + Token bán kính viền được áp dụng cho các phần tử có góc bo tròn, chẳng hạn như nút, thẻ, trường nhập liệu và vùng chứa, để làm mềm các cạnh của chúng và tạo ra vẻ ngoài dễ chịu hơn. + Token + Rất nhỏ + Sử dụng Rất nhỏ cho các góc bo tròn rất tinh tế. + Nhỏ + Sử dụng Nhỏ cho các phần tử nhỏ nhất hoặc các thành phần lồng nhau. + Trung bình + Biến thể Trung bình được sử dụng trong hầu hết các thành phần. Sử dụng nó trong các thành phần và vùng chứa từ nhỏ đến trung bình. + Lớn + Sử dụng Lớn cho các thành phần và vùng chứa từ trung bình đến lớn. + Rất lớn + Sử dụng Rất lớn cho các phần tử lớn nhất, đặc biệt là trên màn hình máy tính bảng. + Viên thuốc + Sử dụng Viên thuốc cho các thành phần có các cạnh hoàn toàn tròn. + Biểu tượng + Biểu tượng là tài sản đồ họa giúp cải thiện khả năng sử dụng bằng cách cung cấp ý nghĩa bổ sung cho các hành động và thành phần, làm cho chúng hấp dẫn hơn về mặt thị giác và dễ hiểu hơn. + Tạo biểu tượng + Khi tạo biểu tượng mới, hãy bắt đầu với cơ sở 24px và vẽ biểu tượng bằng nét 1.5px. Sử dụng lưới Biểu tượng (được thể hiện bên dưới) để giúp bạn thiết kế các biểu tượng nhất quán. + diff --git a/sample/common/src/main/res/values-zh-CN/strings.xml b/sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml similarity index 100% rename from sample/common/src/main/res/values-zh-CN/strings.xml rename to sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml diff --git a/sample/design-system-catalog/src/main/res/values/strings.xml b/sample/design-system-catalog/src/main/res/values/strings.xml new file mode 100644 index 0000000..dbfc689 --- /dev/null +++ b/sample/design-system-catalog/src/main/res/values/strings.xml @@ -0,0 +1,56 @@ + + + + LanguageStudy + + Design System + + A comprehensive catalog of components and styles + + Design tokens + + Design token + + Component + + Components + Winter + Designed & Development by Winter + \@ 2025 All rights reserved. + Option + Color System + Display + Use the display font style for large headings or prominent text that requires emphasis. Display is ideal for grabbing the user\'s attention and making a bold statement. Avoid using this style for long texts. + Title + Use the title font style when you need a clear visual hierarchy without overwhelming the layout. You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc. + Body + The body font style is ideal for regular text content, such as paragraphs, or descriptions. The body styles are suitable both for long and short text, where readability and legibility are essential. + Action + The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. Use it to distinguish interactive elements from regular text. + Caption + The caption font style is used for supporting text that provides context and complements visual elements, like icons, images, tags, etc. Avoid using this style in long texts. + Spacing + Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance. + Usage + Use the spacing tokens to organize the content under the correct hierarchy.\n\nIt\'s important to group related elements to increase readability.\n\nFor related items, use smaller spacing values. While between unrelated items, it\'s better to increase the spacing. + When stacking components + Border radius + Border radius tokens are applied to elements with rounded corners, such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance. + Tokens + Extra Small + Use Extra small for very subtle rounded corners. + Small + Use Small for the smallest elements or nested components. + Medium + The Medium variation is used in most components. Use it in small-to-medium components and containers. + Large + Use Large for medium-to-large components and containers. + Extra Large + Use Extra Large for the biggest elements, especially on tablet screens. + Pill + Use Pill for the components that are completely rounded on their sides. + Icons + Icons are graphic assets that improve usability by providing extra meaning to actions and components, making them more visually appealing and easier to understand. + Creating an icon + When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. Use the Icon grid (represented below) to help you design consistent icons. + From de30774ef16f406ee96d6ae12a72ebe75bca7c4a Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 09:19:59 +0900 Subject: [PATCH 06/18] Update translation --- sample/common/src/main/res/values/strings.xml | 2 +- .../src/main/res/values-ja/strings.xml | 56 ------------------- .../src/main/res/values-ko/strings.xml | 56 ------------------- .../src/main/res/values-th/strings.xml | 56 ------------------- .../src/main/res/values-vi/strings.xml | 56 ------------------- .../src/main/res/values-zh-rCN/strings.xml | 56 ------------------- .../src/main/res/values/strings.xml | 56 ------------------- 7 files changed, 1 insertion(+), 337 deletions(-) delete mode 100644 sample/design-system-catalog/src/main/res/values-ja/strings.xml delete mode 100644 sample/design-system-catalog/src/main/res/values-ko/strings.xml delete mode 100644 sample/design-system-catalog/src/main/res/values-th/strings.xml delete mode 100644 sample/design-system-catalog/src/main/res/values-vi/strings.xml delete mode 100644 sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml delete mode 100644 sample/design-system-catalog/src/main/res/values/strings.xml diff --git a/sample/common/src/main/res/values/strings.xml b/sample/common/src/main/res/values/strings.xml index dbfc689..33c6c1c 100644 --- a/sample/common/src/main/res/values/strings.xml +++ b/sample/common/src/main/res/values/strings.xml @@ -5,7 +5,7 @@ Design System - A comprehensive catalog of components and styles + A comprehensive catalog of \ncomponents and styles Design tokens diff --git a/sample/design-system-catalog/src/main/res/values-ja/strings.xml b/sample/design-system-catalog/src/main/res/values-ja/strings.xml deleted file mode 100644 index 39a222b..0000000 --- a/sample/design-system-catalog/src/main/res/values-ja/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - デザインシステム - - コンポーネントとスタイルの総合カタログ - - デザイントークン - - デザイントークン - - コンポーネント - - コンポーネント - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - オプション - カラーシステム - ディスプレイ - ディスプレイフォントスタイルは、大きな見出しや強調が必要な主要テキストに使用してください。ユーザーの注意を引き、力強い印象を与えるのに最適です。長いテキストには使用しないでください。 - タイトル - 카드 제목 - 本文 - 本文フォントスタイルは、段落や説明などの通常のテキストコンテンツに最適です。可読性と判読性が重要な長いテキストと短いテキストの両方に適しています。 - アクション - アクションフォントスタイルは、ボタン、入力フィールド、リンクなど、インタラクティブまたは実行可能なアイテムを表すテキスト要素に適しています。通常のテキストとインタラクティブ要素を区別するために使用してください。 - キャプション - キャプションフォントスタイルは、アイコン、画像、タグなどの視覚要素を補完し、コンテキストを提供する補助テキストに使用されます。長いテキストには使用しないでください。 - スペーシング - スペーシングトークンは、要素間の一貫した間隔と配置を保証し、より良い可読性、明確性、バランスを提供します。 - 使用方法 - スペーシングトークンを使用して、正しい階層でコンテンツを整理してください。可読性を高めるには、関連する要素をグループ化することが重要です。関連項目には小さい間隔値を使用し、無関係な項目間では間隔を広げることをお勧めします。 - 컴포넌트를 쌓을 때는 그룹 내 모든 요소 사이에 동일한 간격을 사용하세요. - ボーダー半径 - ボーダー半径トークンは、ボタン、カード、入力フィールド、コンテナなどの角が丸い要素に適用され、エッジを柔らかくし、より美しい外観を作成します。 - トークン - エクストラスモール - エクストラスモールは、非常に微妙な丸い角に使用してください。 - スモール - スモールは、最小の要素やネストされたコンポーネントに使用してください。 - ミディアム - ミディアムは、ほとんどのコンポーネントで使用されます。小型から中型のコンポーネントとコンテナに使用してください。 - ラージ - ラージは、中型から大型のコンポーネントとコンテナに使用してください。 - エクストララージ - エクストララージは、特にタブレット画面で最も大きな要素に使用してください。 - ピル - ピルは、両側が完全に丸いコンポーネントに使用してください。 - アイコン - アイコンは、アクションやコンポーネントに追加の意味を提供することで使いやすさを向上させ、視覚的により魅力的で理解しやすくするグラフィック資産です。 - アイコンの作成 - 新しいアイコンを作成する場合は、24pxのベースから始め、1.5pxのストロークを使用してアイコンを描いてください。一貫したアイコンをデザインするために、アイコングリッド（下記）を使用してください。 - diff --git a/sample/design-system-catalog/src/main/res/values-ko/strings.xml b/sample/design-system-catalog/src/main/res/values-ko/strings.xml deleted file mode 100644 index 9331013..0000000 --- a/sample/design-system-catalog/src/main/res/values-ko/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - 디자인 시스템 - - 컴포넌트와 스타일의 종합 카탈로그 - - 디자인 토큰 - - 디자인 토큰 - - 컴포넌트 - - 컴포넌트 - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - 옵션 - 컬러 시스템 - 디스플레이 - 디스플레이 폰트 스타일은 큰 제목이나 강조가 필요한 주요 텍스트에 사용하세요. 사용자의 시선을 끌고 강렬한 인상을 주기에 이상적입니다. 긴 텍스트에는 사용하지 마세요. - 타이틀 - 타이틀 폰트 스타일은 레이아웃을 압도하지 않으면서 명확한 시각적 계층이 필요할 때 사용하세요. 섹션 제목 - 본문 - 본문 폰트 스타일은 문단이나 설명과 같은 일반 텍스트 콘텐츠에 이상적입니다. 가독성과 판독성이 중요한 긴 텍스트와 짧은 텍스트 모두에 적합합니다. - 액션 - 액션 폰트 스타일은 버튼, 입력 필드, 링크와 같이 상호작용하거나 실행 가능한 항목을 나타내는 텍스트 요소에 적합합니다. 일반 텍스트와 상호작용 요소를 구분하는 데 사용하세요. - 캡션 - 캡션 폰트 스타일은 아이콘, 이미지, 태그 등 시각적 요소를 보완하고 맥락을 제공하는 보조 텍스트에 사용됩니다. 긴 텍스트에는 사용하지 마세요. - 간격 - 간격 토큰은 요소 간 일관된 간격과 정렬을 보장하며, 더 나은 가독성, 명확성, 균형을 제공합니다. - 사용법 - 간격 토큰을 사용하여 올바른 계층 구조로 콘텐츠를 구성하세요. 가독성을 높이려면 관련 요소를 그룹화하는 것이 중요합니다. 관련된 항목은 작은 간격 값을 사용하고, 관련 없는 항목 사이에는 간격을 늘리는 것이 좋습니다. - use the same spacing between all elements in the group. - 모서리 반경 - 모서리 반경 토큰은 버튼, 카드, 입력 필드, 컨테이너 등 둥근 모서리를 가진 요소에 적용되어 가장자리를 부드럽게 하고 더 보기 좋은 외관을 만듭니다. - 토큰 - 엑스트라 스몰 - 엑스트라 스몰은 매우 미묘한 둥근 모서리에 사용하세요. - 스몰 - 스몰은 가장 작은 요소나 중첩된 컴포넌트에 사용하세요. - 미디엄 - 미디엄은 대부분의 컴포넌트에 사용됩니다. 소형에서 중형 컴포넌트 및 컨테이너에 사용하세요. - 라지 - 라지는 중형에서 대형 컴포넌트 및 컨테이너에 사용하세요. - 엑스트라 라지 - 엑스트라 라지는 가장 큰 요소, 특히 태블릿 화면에서 사용하세요. - 필 - 필은 양쪽이 완전히 둥근 컴포넌트에 사용하세요. - 아이콘 - 아이콘은 액션과 컴포넌트에 추가적인 의미를 제공하여 사용성을 향상시키고, 시각적으로 더 매력적이며 이해하기 쉽게 만드는 그래픽 자산입니다. - 아이콘 만들기 - 새 아이콘을 만들 때는 24px 베이스로 시작하고 1.5px 스트로크를 사용하여 아이콘을 그리세요. 일관된 아이콘을 디자인하는 데 도움이 되도록 아이콘 그리드(아래 표시)를 사용하세요. - diff --git a/sample/design-system-catalog/src/main/res/values-th/strings.xml b/sample/design-system-catalog/src/main/res/values-th/strings.xml deleted file mode 100644 index 28ebec1..0000000 --- a/sample/design-system-catalog/src/main/res/values-th/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - ระบบดีไซน์ - - แคตตาล็อกที่ครอบคลุมของคอมโพเนนต์และสไตล์ - - โทเค็นดีไซน์ - - โทเค็นดีไซน์ - - คอมโพเนนต์ - - คอมโพเนนต์ - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - ตัวเลือก - ระบบสี - หน้าจอแสดงผล - ใช้สไตล์ฟอนต์แบบดิสเพลย์สำหรับหัวข้อใหญ่หรือข้อความที่โดดเด่นซึ่งต้องการการเน้น ดิสเพลย์เหมาะสำหรับดึงดูดความสนใจของผู้ใช้และสร้างความประทับใจที่แข็งแกร่ง หลีกเลี่ยงการใช้สไตล์นี้สำหรับข้อความยาว - หัวข้อ - ใช้สไตล์ฟอนต์หัวข้อเมื่อคุณต้องการลำดับชั้นภาพที่ชัดเจนโดยไม่ทำให้เลย์เอาต์ดูแน่นเกินไป คุณสามารถใช้สไตล์นี้ในข้อความสั้นที่จำเป็นต้องโดดเด่นเมื่อเปรียบเทียบกับข้อความเนื้อหา เช่น หัวข้อส่วน หัวข้อการ์ด หัวข้อหน้า ฯลฯ - เนื้อหา - สไตล์ฟอนต์เนื้อหาเหมาะสำหรับเนื้อหาข้อความปกติ เช่น ย่อหน้าหรือคำอธิบาย สไตล์เนื้อหาเหมาะสำหรับทั้งข้อความยาวและสั้น ซึ่งความสามารถในการอ่านและความชัดเจนเป็นสิ่งสำคัญ - การกระทำ - สไตล์ฟอนต์การกระทำเหมาะสำหรับองค์ประกอบข้อความที่แสดงรายการเชิงโต้ตอบหรือสามารถดำเนินการได้ เช่น ปุ่ม ช่องป้อนข้อมูล และลิงก์ ใช้เพื่อแยกองค์ประกอบเชิงโต้ตอบจากข้อความปกติ - คำอธิบาย - สไตล์ฟอนต์คำอธิบายใช้สำหรับข้อความสนับสนุนที่ให้บริบทและเสริมองค์ประกอบภาพ เช่น ไอคอน รูปภาพ แท็ก ฯลฯ หลีกเลี่ยงการใช้สไตล์นี้ในข้อความยาว - ระยะห่าง - โทเค็นระยะห่างรับประกันระยะห่างและการจัดตำแหน่งที่สอดคล้องกันระหว่างองค์ประกอบ ในขณะที่ให้ความสามารถในการอ่าน ความชัดเจน และความสมดุลที่ดีขึ้น - การใช้งาน - ใช้โทเค็นระยะห่างเพื่อจัดระเบียบเนื้อหาภายใต้ลำดับชั้นที่ถูกต้อง สิ่งสำคัญคือการจัดกลุ่มองค์ประกอบที่เกี่ยวข้องเพื่อเพิ่มความสามารถในการอ่าน สำหรับรายการที่เกี่ยวข้อง ให้ใช้ค่าระยะห่างที่เล็กกว่า ในขณะที่ระหว่างรายการที่ไม่เกี่ยวข้อง ควรเพิ่มระยะห่าง - เมื่อซ้อนคอมโพเนนต์ ให้ใช้ระยะห่างเดียวกันระหว่างองค์ประกอบทั้งหมดในกลุ่ม - รัศมีขอบ - โทเค็นรัศมีขอบถูกนำไปใช้กับองค์ประกอบที่มีมุมโค้งมน เช่น ปุ่ม การ์ด ช่องป้อนข้อมูล และคอนเทนเนอร์ เพื่อทำให้ขอบนุ่มนวลและสร้างรูปลักษณ์ที่น่าดูยิ่งขึ้น - โทเค็น - เล็กพิเศษ - ใช้เล็กพิเศษสำหรับมุมโค้งมนที่ละเอียดอ่อนมาก - เล็ก - ใช้เล็กสำหรับองค์ประกอบที่เล็กที่สุดหรือคอมโพเนนต์ที่ซ้อนกัน - กลาง - รูปแบบกลางถูกใช้ในคอมโพเนนต์ส่วนใหญ่ ใช้ในคอมโพเนนต์และคอนเทนเนอร์ขนาดเล็กถึงกลาง - ใหญ่ - ใช้ใหญ่สำหรับคอมโพเนนต์และคอนเทนเนอร์ขนาดกลางถึงใหญ่ - ใหญ่พิเศษ - ใช้ใหญ่พิเศษสำหรับองค์ประกอบที่ใหญ่ที่สุด โดยเฉพาะบนหน้าจอแท็บเล็ต - เม็ด - ใช้เม็ดสำหรับคอมโพเนนต์ที่โค้งมนอย่างสมบูรณ์ที่ด้านข้าง - ไอคอน - ไอคอนเป็นทรัพย์สินกราฟิกที่ปรับปรุงการใช้งานโดยให้ความหมายเพิ่มเติมแก่การกระทำและคอมโพเนนต์ ทำให้มีความน่าสนใจทางสายตามากขึ้นและเข้าใจง่ายขึ้น - สร้างไอคอน - เมื่อสร้างไอคอนใหม่ ให้เริ่มต้นด้วยฐาน 24px และวาดไอคอนโดยใช้เส้นขนาด 1.5px ใช้ตารางไอคอน (แสดงด้านล่าง) เพื่อช่วยคุณออกแบบไอคอนที่สอดคล้องกัน - diff --git a/sample/design-system-catalog/src/main/res/values-vi/strings.xml b/sample/design-system-catalog/src/main/res/values-vi/strings.xml deleted file mode 100644 index f666f1a..0000000 --- a/sample/design-system-catalog/src/main/res/values-vi/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - Hệ thống thiết kế - - Danh mục toàn diện về các thành phần và phong cách - - Token thiết kế - - Token thiết kế - - Thành phần - - Thành phần - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - Tùy chọn - Hệ thống màu sắc - Hiển thị - Sử dụng kiểu phông chữ hiển thị cho các tiêu đề lớn hoặc văn bản nổi bật cần nhấn mạnh. Hiển thị rất lý tưởng để thu hút sự chú ý của người dùng và tạo ra tuyên bố táo bạo. Tránh sử dụng kiểu này cho văn bản dài. - Tiêu đề - Sử dụng kiểu phông chữ tiêu đề khi bạn cần một hệ thống phân cấp trực quan rõ ràng mà không làm choáng ngợp bố cục. Bạn có thể áp dụng kiểu này trong các văn bản ngắn cần nổi bật so với văn bản nội dung, như tiêu đề phần, tiêu đề thẻ, tiêu đề trang, v.v. - Nội dung - Kiểu phông chữ nội dung lý tưởng cho nội dung văn bản thông thường, chẳng hạn như đoạn văn hoặc mô tả. Kiểu nội dung phù hợp cho cả văn bản dài và ngắn, nơi khả năng đọc và dễ đọc là điều cần thiết. - Hành động - Kiểu phông chữ hành động phù hợp cho các phần tử văn bản đại diện cho các mục tương tác hoặc có thể thực hiện, chẳng hạn như nút, trường nhập liệu và liên kết. Sử dụng nó để phân biệt các phần tử tương tác với văn bản thông thường. - Chú thích - Kiểu phông chữ chú thích được sử dụng cho văn bản hỗ trợ cung cấp ngữ cảnh và bổ sung cho các yếu tố trực quan, như biểu tượng, hình ảnh, thẻ, v.v. Tránh sử dụng kiểu này trong văn bản dài. - Khoảng cách - Token khoảng cách đảm bảo khoảng cách và căn chỉnh nhất quán giữa các phần tử đồng thời cung cấp khả năng đọc, rõ ràng và cân bằng tốt hơn. - Cách sử dụng - Sử dụng token khoảng cách để sắp xếp nội dung theo đúng hệ thống phân cấp. Điều quan trọng là nhóm các phần tử liên quan để tăng khả năng đọc. Đối với các mục liên quan, sử dụng giá trị khoảng cách nhỏ hơn. Trong khi giữa các mục không liên quan, tốt hơn là tăng khoảng cách. - Khi xếp chồng các thành phần, hãy sử dụng cùng một khoảng cách giữa tất cả các phần tử trong nhóm. - Bán kính viền - Token bán kính viền được áp dụng cho các phần tử có góc bo tròn, chẳng hạn như nút, thẻ, trường nhập liệu và vùng chứa, để làm mềm các cạnh của chúng và tạo ra vẻ ngoài dễ chịu hơn. - Token - Rất nhỏ - Sử dụng Rất nhỏ cho các góc bo tròn rất tinh tế. - Nhỏ - Sử dụng Nhỏ cho các phần tử nhỏ nhất hoặc các thành phần lồng nhau. - Trung bình - Biến thể Trung bình được sử dụng trong hầu hết các thành phần. Sử dụng nó trong các thành phần và vùng chứa từ nhỏ đến trung bình. - Lớn - Sử dụng Lớn cho các thành phần và vùng chứa từ trung bình đến lớn. - Rất lớn - Sử dụng Rất lớn cho các phần tử lớn nhất, đặc biệt là trên màn hình máy tính bảng. - Viên thuốc - Sử dụng Viên thuốc cho các thành phần có các cạnh hoàn toàn tròn. - Biểu tượng - Biểu tượng là tài sản đồ họa giúp cải thiện khả năng sử dụng bằng cách cung cấp ý nghĩa bổ sung cho các hành động và thành phần, làm cho chúng hấp dẫn hơn về mặt thị giác và dễ hiểu hơn. - Tạo biểu tượng - Khi tạo biểu tượng mới, hãy bắt đầu với cơ sở 24px và vẽ biểu tượng bằng nét 1.5px. Sử dụng lưới Biểu tượng (được thể hiện bên dưới) để giúp bạn thiết kế các biểu tượng nhất quán. - diff --git a/sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml b/sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml deleted file mode 100644 index d1ff0b5..0000000 --- a/sample/design-system-catalog/src/main/res/values-zh-rCN/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - 设计系统 - - 组件和样式的综合目录 - - 设计令牌 - - 设计令牌 - - 组件 - - 组件 - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - 选项 - 颜色系统 - 显示 - 显示字体样式用于大标题或需要强调的突出文本。显示非常适合吸引用户注意力并做出大胆的声明。避免在长文本中使用此样式。 - 标题 - 当您需要清晰的视觉层次而不会使布局过于复杂时，请使用标题字体样式。您可以将此样式应用于需要与正文文本区分开来的短文本，例如章节标题、卡片标题、页面标题等。 - 正文 - 正文字体样式非常适合常规文本内容，例如段落或描述。正文样式适用于长文本和短文本，其中可读性和易读性至关重要。 - 操作 - 操作字体样式适用于表示交互或可操作项目的文本元素，例如按钮、输入框和链接。使用它来区分交互元素和常规文本。 - 说明文字 - 说明文字字体样式用于提供上下文并补充视觉元素的辅助文本，如图标、图像、标签等。避免在长文本中使用此样式。 - 间距 - 间距令牌保证元素之间的间距和对齐一致，同时提供更好的可读性、清晰度和平衡性。 - 使用方法 - 使用间距令牌在正确的层次结构下组织内容。对相关元素进行分组以提高可读性非常重要。对于相关项目，使用较小的间距值。而对于不相关的项目之间，最好增加间距。 - 堆叠组件时，在组中的所有元素之间使用相同的间距。 - 边框半径 - 边框半径令牌应用于具有圆角的元素，例如按钮、卡片、输入字段和容器，以软化其边缘并创建更令人愉悦的外观。 - 令牌 - 超小 - 超小用于非常微妙的圆角。 - 小 - 小用于最小的元素或嵌套组件。 - 中 - 中等变体用于大多数组件。将其用于中小型组件和容器。 - 大 - 大用于中大型组件和容器。 - 超大 - 超大用于最大的元素，特别是在平板电脑屏幕上。 - 胶囊 - 胶囊用于两侧完全圆润的组件。 - 图标 - 图标是通过为操作和组件提供额外含义来提高可用性的图形资源，使其更具视觉吸引力且更易于理解。 - 创建图标 - 创建新图标时，从24px的基础开始，并使用1.5px笔画绘制图标。使用图标网格（如下所示）帮助您设计一致的图标。 - diff --git a/sample/design-system-catalog/src/main/res/values/strings.xml b/sample/design-system-catalog/src/main/res/values/strings.xml deleted file mode 100644 index dbfc689..0000000 --- a/sample/design-system-catalog/src/main/res/values/strings.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - LanguageStudy - - Design System - - A comprehensive catalog of components and styles - - Design tokens - - Design token - - Component - - Components - Winter - Designed & Development by Winter - \@ 2025 All rights reserved. - Option - Color System - Display - Use the display font style for large headings or prominent text that requires emphasis. Display is ideal for grabbing the user\'s attention and making a bold statement. Avoid using this style for long texts. - Title - Use the title font style when you need a clear visual hierarchy without overwhelming the layout. You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc. - Body - The body font style is ideal for regular text content, such as paragraphs, or descriptions. The body styles are suitable both for long and short text, where readability and legibility are essential. - Action - The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. Use it to distinguish interactive elements from regular text. - Caption - The caption font style is used for supporting text that provides context and complements visual elements, like icons, images, tags, etc. Avoid using this style in long texts. - Spacing - Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance. - Usage - Use the spacing tokens to organize the content under the correct hierarchy.\n\nIt\'s important to group related elements to increase readability.\n\nFor related items, use smaller spacing values. While between unrelated items, it\'s better to increase the spacing. - When stacking components - Border radius - Border radius tokens are applied to elements with rounded corners, such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance. - Tokens - Extra Small - Use Extra small for very subtle rounded corners. - Small - Use Small for the smallest elements or nested components. - Medium - The Medium variation is used in most components. Use it in small-to-medium components and containers. - Large - Use Large for medium-to-large components and containers. - Extra Large - Use Extra Large for the biggest elements, especially on tablet screens. - Pill - Use Pill for the components that are completely rounded on their sides. - Icons - Icons are graphic assets that improve usability by providing extra meaning to actions and components, making them more visually appealing and easier to understand. - Creating an icon - When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. Use the Icon grid (represented below) to help you design consistent icons. - From ce7bf8742f2f83a88007ebd48d7b9bbe7b46b6f7 Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 09:20:19 +0900 Subject: [PATCH 07/18] Connect translation with source code --- .../designtokens/borderradius/Data.kt | 29 ++++++------ .../designtokens/borderradius/Screen.kt | 27 +++++++----- .../dscatalog/designtokens/color/Screen.kt | 4 +- .../dscatalog/designtokens/icons/Screen.kt | 14 +++--- .../dscatalog/designtokens/spacing/Screen.kt | 20 ++++----- .../designtokens/typography/Screen.kt | 44 ++++++------------- .../dev/love/winter/dscatalog/home/Screen.kt | 21 ++++----- 7 files changed, 74 insertions(+), 85 deletions(-) diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt index b5c8944..cc543bb 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt @@ -6,13 +6,14 @@ import androidx.compose.runtime.remember import androidx.compose.ui.graphics.Shape import dev.love.winter.designsystem.theme.WinterTheme import dev.love.winter.dscatalog.R +import dev.love.winter.sample.common.R as CommonR class Data data class UsageInfo( - val title: String, + @param:DrawableRes val titleRes: Int, @param:DrawableRes val imageRes: Int, - val description: String, + @param:DrawableRes val descriptionRes: Int, ) data class SpecInfo( @@ -23,34 +24,34 @@ data class SpecInfo( val usageInfoItems = listOf( UsageInfo( - title = "Extra small", + titleRes = CommonR.string.extra_small, imageRes = R.drawable.image_border_radius_usage, - description = "Use Extra small for very subtle rounded corners.", + descriptionRes = CommonR.string.extra_small_description, ), UsageInfo( - title = "Small", + titleRes = CommonR.string.small, imageRes = R.drawable.image_border_radius_usage_small, - description = "Use Small for the smallest elements or nested components.", + descriptionRes = CommonR.string.small_description, ), UsageInfo( - title = "Medium", + titleRes = CommonR.string.medium, imageRes = R.drawable.image_border_radius_usage_medium, - description = "The Medium variation is used in most components. Use it in small-to-medium components and containers.", + descriptionRes = CommonR.string.medium_description, ), UsageInfo( - title = "Large", + titleRes = CommonR.string.large, imageRes = R.drawable.image_border_radius_usage_large, - description = "Use Large for medium-to-large components and containers.", + descriptionRes = CommonR.string.large_description, ), UsageInfo( - title = "Extra Large", + titleRes = CommonR.string.extra_large, imageRes = R.drawable.image_border_radius_usage_extra_large, - description = "Use Extra Large for the biggest elements, especially on tablet screens.", + descriptionRes = CommonR.string.extra_large_description, ), UsageInfo( - title = "Pill", + titleRes = CommonR.string.pill, imageRes = R.drawable.image_border_radius_usage_pill, - description = "Use Pill for the components that are completely rounded on their sides.", + descriptionRes = CommonR.string.pill_description, ), ) diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt index 6dd14b9..b7f7b23 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt @@ -22,11 +22,12 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme -import dev.love.winter.dscatalog.R +import dev.love.winter.sample.common.R private const val ASPECT_COLUMN_RATIO_TOKEN = 0.5f private const val ASPECT_COLUMN_RATIO_PX = 0.3f @@ -55,15 +56,14 @@ fun Screen( ) { item(key = "Title") { Text( - text = "Border radius", + text = stringResource(R.string.border_radius), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) .padding(top = WinterTheme.spacing.extraExtraLarge), ) Text( - text = "Border radius tokens are applied to elements with rounded corners, " + - "such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance.", + text = stringResource(R.string.border_radius_description), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -85,7 +85,7 @@ fun Screen( ), ) { Image( - painter = painterResource(R.drawable.image_border_radius_sample), + painter = painterResource(dev.love.winter.dscatalog.R.drawable.image_border_radius_sample), contentDescription = "sample image", modifier = Modifier.align(Alignment.Center) ) @@ -93,6 +93,7 @@ fun Screen( } item(key = "Tokens") { + stringResource(R.string.tokens) Text( text = "Tokens", style = WinterTheme.typography.displayMedium, @@ -147,7 +148,7 @@ fun Screen( item(key = "Usage title") { Text( - text = "Usage", + text = stringResource(R.string.usage), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -156,9 +157,9 @@ fun Screen( } usageInfoItems.forEach { usageInfo -> - item(key = "Usage title - ${usageInfo.title}") { + item(key = "Usage title - ${usageInfo.titleRes}") { Text( - text = usageInfo.title, + text = stringResource(usageInfo.titleRes), style = WinterTheme.typography.titleLarge, color = WinterTheme.color.textSubtitle, modifier = Modifier @@ -167,15 +168,15 @@ fun Screen( ) } - item(key = "Usage sample - ${usageInfo.title}") { + item(key = "Usage sample - ${usageInfo.titleRes}") { UsageSampleImage( imageRes = usageInfo.imageRes, ) } - item(key = "Usage desc - ${usageInfo.title}") { + item(key = "Usage desc - ${usageInfo.titleRes}") { Text( - text = usageInfo.description, + text = stringResource(usageInfo.descriptionRes), color = WinterTheme.color.textCaption, modifier = Modifier .padding(top = WinterTheme.spacing.small) @@ -191,7 +192,7 @@ fun Screen( private fun UsageSampleImage( @DrawableRes imageRes: Int, ) { - if (imageRes == R.drawable.image_border_radius_usage) { + if (imageRes == dev.love.winter.dscatalog.R.drawable.image_border_radius_usage) { Box( modifier = Modifier @@ -295,10 +296,12 @@ private fun SpecItem( @Preview( name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, + heightDp = 2000, ) @Preview( name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, + heightDp = 2000, ) @Composable private fun Preview() { diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt index 38d0e05..2ce4911 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt @@ -24,6 +24,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -36,6 +37,7 @@ import dev.love.winter.designsystem.api.yellowColorTokens import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme import kotlinx.collections.immutable.ImmutableList +import dev.love.winter.sample.common.R @Composable fun ColorRoute( @@ -63,7 +65,7 @@ private fun Screen( ) { item(span = { GridItemSpan(maxLineSpan) }) { Text( - text = "Color System", + text = stringResource(R.string.color_system), style = WinterTheme.typography.displayMedium, modifier = Modifier.padding(top = WinterTheme.spacing.extraExtraLarge), ) diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt index 9c2aac6..1739d9c 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt @@ -19,11 +19,13 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme import dev.love.winter.designsystem.tokens.IconResource import dev.love.winter.dscatalog.R +import dev.love.winter.sample.common.R as CommonR private const val ASPECT_COLUMN_RATIO_TOKEN = 0.65f private const val ASPECT_COLUMN_RATIO_EXAMPLE = 0.35f @@ -51,15 +53,14 @@ private fun Screen( ) { item(key = "Icons") { Text( - text = "Icons", + text = stringResource(CommonR.string.icons), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) .padding(top = WinterTheme.spacing.extraExtraLarge), ) Text( - text = "Icons are graphic assets that improve usability by providing extra meaning to actions and components, " + - "making them more visually appealing and easier to understand", + text = stringResource(CommonR.string.icons_description), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -68,15 +69,14 @@ private fun Screen( } item(key = "Creating an icon") { Text( - text = "Creating an icon", + text = stringResource(CommonR.string.creating_an_icon), style = WinterTheme.typography.displaySmall, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) .padding(top = WinterTheme.spacing.extraExtraLarge), ) Text( - text = "When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. " + - "Use the Icon grid (represented below) to help you design consistent icons.", + text = stringResource(CommonR.string.creating_an_icon_description), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -99,7 +99,7 @@ private fun Screen( } item(key = "Tokens") { Text( - text = "Tokens", + text = stringResource(CommonR.string.tokens), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt index 6b60a0e..d2cbe39 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt @@ -21,11 +21,13 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme import dev.love.winter.dscatalog.R +import dev.love.winter.sample.common.R as CommonR private const val ASPECT_COLUMN_RATIO_TOKEN = 0.5f private const val ASPECT_COLUMN_RATIO_PX = 0.2f @@ -53,14 +55,14 @@ private fun Screen( ) { item(key = "Spacing") { Text( - text = "Spacing", + text = stringResource(CommonR.string.spacing), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) .padding(top = WinterTheme.spacing.extraExtraLarge), ) Text( - text = "Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance.", + text = stringResource(CommonR.string.spacing_description), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -91,7 +93,7 @@ private fun Screen( item(key = "Tokens") { Text( - text = "Tokens", + text = stringResource(CommonR.string.tokens), style = WinterTheme.typography.displayMedium, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -202,13 +204,7 @@ private fun Screen( item(key = "Usage desc") { Text( - text = """ - Use the spacing tokens to organize the content under the correct hierarchy. - - It's important to group related elements to increase readability. - - For related items, use smaller spacing values. While between unrelated items, it's better to increase the spacing. - """.trimIndent(), + text = stringResource(CommonR.string.usage_description_1), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -240,7 +236,7 @@ private fun Screen( item(key = "Usage desc 2") { Text( - text = "When stacking components, use the same spacing between all elements in the group.", + text = stringResource(CommonR.string.usage_description_2), color = WinterTheme.color.textCaption, modifier = Modifier .padding(horizontal = WinterTheme.spacing.small) @@ -333,10 +329,12 @@ private fun SpacingExample( @Preview( name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, + heightDp = 2000, ) @Preview( name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, + heightDp = 2000, ) @Composable private fun Preview() { diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt index 0eea61a..e641017 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt @@ -14,29 +14,11 @@ import androidx.compose.material3.HorizontalDivider import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme - -private const val DESC_HEADER_DISPLAY = - "Use the display font style for large headings or prominent text that requires emphasis. " + - "Display is ideal for grabbing the user's attention and making a bold statement. Avoid using this style for long texts." - -private const val DESC_HEADER_TITLE = - "Use the title font style when you need a clear visual hierarchy without overwhelming the layout. " + - "You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc." - -private const val DESC_HEADER_BODY = - "The body font style is ideal for regular text content, such as paragraphs, or descriptions. " + - "The body styles are suitable both for long and short text, where readability and legibility are essential." - -private const val DESC_HEADER_ACTION = - "The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. " + - "Use it to distinguish interactive elements from regular text." - -private const val DESC_HEADER_CAPTION = - "The caption font style is used for supporting text that provides context and complements visual elements, " + - "like icons, images, tags, etc. Avoid using this style in long texts." +import dev.love.winter.sample.common.R as CommonR @Composable fun TypographyRoute( @@ -60,8 +42,8 @@ private fun Screen( ) { item(key = "display-header") { SectionHeader( - title = "Display", - description = DESC_HEADER_DISPLAY, + title = stringResource(CommonR.string.display), + description = stringResource(CommonR.string.display_description), modifier = Modifier.padding(top = WinterTheme.spacing.extraExtraLarge), ) } @@ -74,8 +56,8 @@ private fun Screen( item(key = "title-header") { SectionHeader( - title = "Title", - description = DESC_HEADER_TITLE, + title = stringResource(CommonR.string.title), + description = stringResource(CommonR.string.title_description), ) } items( @@ -87,8 +69,8 @@ private fun Screen( item(key = "body-header") { SectionHeader( - title = "Body", - description = DESC_HEADER_BODY, + title = stringResource(CommonR.string.body), + description = stringResource(CommonR.string.body_description), ) } items( @@ -100,8 +82,8 @@ private fun Screen( item(key = "action-header") { SectionHeader( - title = "Action", - description = DESC_HEADER_ACTION, + title = stringResource(CommonR.string.action), + description = stringResource(CommonR.string.action_description), ) } items( @@ -113,8 +95,8 @@ private fun Screen( item(key = "caption-header") { SectionHeader( - title = "Caption", - description = DESC_HEADER_CAPTION, + title = stringResource(CommonR.string.caption), + description = stringResource(CommonR.string.caption_description), ) } items( @@ -300,10 +282,12 @@ private fun SpecItem( @Preview( name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, + heightDp = 2000, ) @Preview( name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, + heightDp = 2000, ) @Composable fun Preview() { diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt index dbb9e31..541ea30 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt @@ -21,6 +21,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.buildAnnotatedString @@ -35,6 +36,7 @@ import dev.love.winter.designsystem.component.button.spec.ButtonShape import dev.love.winter.designsystem.component.text.Text import dev.love.winter.designsystem.theme.WinterTheme import dev.love.winter.dscatalog.Catalog +import dev.love.winter.sample.common.R import kotlinx.coroutines.flow.collectLatest @Composable @@ -109,7 +111,7 @@ private fun Content( } item { Text( - text = "LanguageStudy", + text = stringResource(R.string.app_name), style = WinterTheme.typography.displayLarge, color = WinterTheme.color.textBrand, modifier = Modifier.padding( @@ -119,15 +121,14 @@ private fun Content( } item { Text( - text = "Design System", + text = stringResource(R.string.design_system), style = WinterTheme.typography.displayLarge, color = WinterTheme.color.textTitle, ) } item { Text( - text = "A comprehensive catalog of\n" + - "components and styles", + text = stringResource(R.string.welcome_message), style = WinterTheme.typography.displaySmall, color = WinterTheme.color.textTitle, modifier = Modifier.padding( @@ -139,7 +140,7 @@ private fun Content( Divider() } stickyHeader { - SectionTitle(text = "🎨 DESIGN TOKENS") + SectionTitle(text = "🎨 " + stringResource(R.string.design_tokens).uppercase()) } items( items = state.designTokenEntries, @@ -159,7 +160,7 @@ private fun Content( Divider() } stickyHeader { - SectionTitle(text = "🧩 COMPONENTS") + SectionTitle(text = "🧩 " + stringResource(R.string.components).uppercase()) } items( items = state.componentEntries.chunked(2), @@ -223,10 +224,10 @@ private fun BottomBar( Text( text = createHighlightedText( text = """ - Designed & Developed by Winter - © 2025 All rights reserved. + ${stringResource(R.string.made_by)} + ${stringResource(R.string.copyright)} """.trimIndent(), - highlightWord = "Winter", + highlightWord = stringResource(R.string.winter), highlightColor = WinterTheme.color.textBrand, baseStyle = WinterTheme.typography.bodySmall, ), @@ -234,7 +235,7 @@ private fun BottomBar( color = WinterTheme.color.textTitle, ) Button( - label = "option", + label = stringResource(R.string.option), onPress = { }, shape = ButtonShape.Small, icon = ButtonIcon.Leading( From 02131352fcdb25aae7ea74161e96d4435fc3bd3b Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 12:29:49 +0900 Subject: [PATCH 08/18] Add locale filter --- .../java/dev/love/winter/convention/KotlinAndroid.kt | 2 +- .../src/main/res/xml/locales_config.xml | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 sample/design-system-catalog/src/main/res/xml/locales_config.xml diff --git a/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt b/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt index 00eeedd..4411d43 100644 --- a/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt +++ b/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt @@ -24,7 +24,7 @@ internal fun Project.configureApplication() { } androidResources { - localeFilters += listOf("en", "ko") + localeFilters += listOf("en", "ko", "ja", "zh-rCN", "vi", "th") } buildTypes { diff --git a/sample/design-system-catalog/src/main/res/xml/locales_config.xml b/sample/design-system-catalog/src/main/res/xml/locales_config.xml new file mode 100644 index 0000000..1d1210a --- /dev/null +++ b/sample/design-system-catalog/src/main/res/xml/locales_config.xml @@ -0,0 +1,9 @@ + + + + + + + + + From 9b424af56c91f94ee5193393e0815793c297d21e Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 12:30:34 +0900 Subject: [PATCH 09/18] Add appCompatActivity() --- sample/design-system-catalog/build.gradle.kts | 1 + .../src/main/java/dev/love/winter/dscatalog/MainActivity.kt | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/sample/design-system-catalog/build.gradle.kts b/sample/design-system-catalog/build.gradle.kts index 1d10bec..8f9c706 100644 --- a/sample/design-system-catalog/build.gradle.kts +++ b/sample/design-system-catalog/build.gradle.kts @@ -20,4 +20,5 @@ android { dependencies { implementation(projects.sample.common) implementation(projects.coreAndroid.designSystem) + implementation(libs.androidX.appcompat) } diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt index aec31a0..39d68fb 100644 --- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt +++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt @@ -1,14 +1,14 @@ package dev.love.winter.dscatalog import android.os.Bundle -import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge +import androidx.appcompat.app.AppCompatActivity import dagger.hilt.android.AndroidEntryPoint import dev.love.winter.designsystem.theme.WinterTheme @AndroidEntryPoint -class MainActivity : ComponentActivity() { +class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() From 1cf4504519778f68b2330a0b844d586cd871f2ca Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 12:31:01 +0900 Subject: [PATCH 10/18] Add LocaleManager util --- .../love/winter/sample/common/util/LocaleManager.kt | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt diff --git a/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt b/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt new file mode 100644 index 0000000..379f14b --- /dev/null +++ b/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt @@ -0,0 +1,11 @@ +package dev.love.winter.sample.common.util + +import androidx.appcompat.app.AppCompatDelegate +import androidx.core.os.LocaleListCompat + +object LocaleManager { + fun setLocale(languageTag: String) { + val appLocale = LocaleListCompat.forLanguageTags(languageTag) + AppCompatDelegate.setApplicationLocales(appLocale) + } +} From 5c8f013824bf3e974fea1662ed8eeeddb381ecaa Mon Sep 17 00:00:00 2001 From: winter-love-dev Date: Sun, 2 Nov 2025 12:31:32 +0900 Subject: [PATCH 11/18] Add NoActionBar theme --- sample/common/src/main/res/values-night/themes.xml | 2 +- sample/common/src/main/res/values/themes.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sample/common/src/main/res/values-night/themes.xml b/sample/common/src/main/res/values-night/themes.xml index dd7aa0d..05a473b 100644 --- a/sample/common/src/main/res/values-night/themes.xml +++ b/sample/common/src/main/res/values-night/themes.xml @@ -1,6 +1,6 @@ -