UIToolkit 기본 UI 개발 중

Assets/Resources/UIToolkit/Sample/UTKStyleGuideSample.uss

@@ -0,0 +1,234 @@
+/*
+ * ===================================
+ * UTKStyleGuideSample.uss
+ * Style Guide Sample Theme-aware Styles
+ * ===================================
+ *
+ * Uses theme variables for Light/Dark theme support.
+ * Color variables are defined in UTKThemeDark.uss / UTKThemeLight.uss.
+ */
+
+/* ===================================
+   Main Container
+   =================================== */
+
+.utk-sample-main {
+    flex-direction: column;
+    background-color: var(--color-bg-base);
+    flex-grow: 1;
+}
+
+/* ===================================
+   Header
+   =================================== */
+
+.utk-sample-header {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+    background-color: var(--color-bg-elevated);
+    border-bottom-width: 1px;
+    border-bottom-color: var(--color-border);
+}
+
+.utk-sample-title {
+    font-size: 24px;
+    -unity-font-style: bold;
+    color: var(--color-text-primary);
+}
+
+.utk-sample-theme-area {
+    flex-direction: row;
+    align-items: center;
+}
+
+.utk-sample-theme-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-right: 16px;
+}
+
+/* ===================================
+   Content (Sidebar + Preview)
+   =================================== */
+
+.utk-sample-content {
+    flex-direction: row;
+    flex-grow: 1;
+}
+
+/* ===================================
+   Sidebar
+   =================================== */
+
+.utk-sample-sidebar {
+    width: 280px;
+    min-width: 280px;
+    background-color: var(--color-bg-secondary);
+    border-right-width: 1px;
+    border-right-color: var(--color-border);
+}
+
+.utk-sample-sidebar-scroll {
+    flex-grow: 1;
+    padding: 16px;
+}
+
+.utk-sample-sidebar-scroll > .utk-foldout {
+    margin-bottom: 8px;
+}
+
+/* ===================================
+   Control Item (in sidebar)
+   =================================== */
+
+.utk-sample-control-item {
+    padding: 8px 12px;
+    margin: 2px 0;
+    border-radius: 4px;
+    cursor: link;
+    transition-duration: 0.15s;
+    transition-property: background-color;
+}
+
+.utk-sample-control-item:hover {
+    background-color: var(--color-btn-hover);
+}
+
+.utk-sample-control-item--selected {
+    background-color: var(--color-btn-primary);
+}
+
+.utk-sample-control-item--selected:hover {
+    background-color: var(--color-btn-primary-hover);
+}
+
+.utk-sample-control-item > Label {
+    font-size: 13px;
+    color: var(--color-text-primary);
+}
+
+.utk-sample-control-item--selected > Label {
+    color: var(--color-text-on-primary);
+}
+
+/* ===================================
+   Preview Area
+   =================================== */
+
+.utk-sample-preview {
+    flex-grow: 1;
+    flex-direction: column;
+    background-color: var(--color-bg-base);
+}
+
+.utk-sample-preview-title {
+    font-size: 20px;
+    -unity-font-style: bold;
+    color: var(--color-text-primary);
+    padding: 20px 24px;
+    background-color: var(--color-bg-elevated);
+    border-bottom-width: 1px;
+    border-bottom-color: var(--color-border);
+}
+
+.utk-sample-preview-scroll {
+    flex-grow: 1;
+    padding: 24px;
+}
+
+.utk-sample-preview-content {
+    flex-direction: column;
+}
+
+/* ===================================
+   Section (in preview)
+   =================================== */
+
+.utk-sample-section {
+    margin-bottom: 24px;
+}
+
+.utk-sample-section__title {
+    font-size: 14px;
+    -unity-font-style: bold;
+    color: var(--color-text-secondary);
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom-width: 1px;
+    border-bottom-color: var(--color-border-light);
+}
+
+.utk-sample-section__desc {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    margin-bottom: 20px;
+    padding: 12px 16px;
+    background-color: var(--color-bg-secondary);
+    border-radius: 6px;
+}
+
+/* ===================================
+   Row (horizontal layout)
+   =================================== */
+
+.utk-sample-row {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.utk-sample-row > * {
+    margin-right: 12px;
+    margin-bottom: 8px;
+}
+
+/* ===================================
+   Legacy Styles (backward compatibility)
+   =================================== */
+
+.utk-sample-stepper-row {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.utk-sample-stepper-label {
+    width: 100px;
+    font-size: 13px;
+    color: var(--color-text-primary);
+}
+
+.utk-sample-button-row {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.utk-sample-button-row > * {
+    margin-right: 10px;
+    margin-bottom: 5px;
+}
+
+.utk-sample-slider-row {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.utk-sample-slider-row > Label {
+    min-width: 80px;
+}
+
+.utk-sample-card-row {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.utk-sample-card-row > * {
+    margin-right: 15px;
+    margin-bottom: 10px;
+}

Assets/Resources/UIToolkit/Sample/UTKStyleGuideSample.uss.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 75552633a0e64384894930c530fe73e1
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0