設計檔案

design.json 和 design.css 是主題的兩個預設設計檔案。

design.json：指定元件樣式
design.css：提供類別值定義 (例如色彩和字型)

這兩個檔案位於主題結構的 /designs/default/ 目錄中。

design.json 檔案

design.json 檔案的結構如下：

{
    "componentStyles": {
        "scs-image": {
            "styles": []
        },
        "scs-map": {
            "styles": []
        },
        "scs-title": {
            "styles": []
        },
        "scs-paragraph": {
            "styles": []
        },
        "scs-divider": {
            "styles": []
        },
        "scs-button": {
            "styles": []
        },
        "scs-app": {
            "styles": []
        },
        "scs-spacer": {
        },
        "scs-gallery": {
            "styles": []
        },
        "scs-youtube": {
            "styles": []
        },
        "scs-socialbar": {
            "styles": []
        },
        "scs-document": {
            "styles": []
        }
    }
}

每個 "styles":[] 項目都可包含該特定元件的樣式清單。例如，標題元件提供以下預設樣式：

    "styles": [{
                    "name": "COMP_STYLE_FLAT",
                    "class": "scs-title-default-style"
               },
               {
                     "name": "COMP_STYLE_HIGHLIGHT",
                     "class": "scs-title-style-2"
               },
               {
                     "name": "COMP_STYLE_DIVIDER",
                     "class": "scs-title-style-3"
               }
    ]

註：

如果您為元件建立自訂樣式並將它對應至 design.json 中的樣式，您就不需要像系統提供的那樣使用完整名稱。只要指定想要使用的字串即可。例如，不使用 "COMP_STYLE_BOX" 作為名稱，只使用 "Box" 即可。這表示在該元件的「設定值」面板中，樣式頁籤清單只會顯示 "Box" 這個名稱，而非 "COMP_STYLE_BOX"。

name 值會對應至使用者介面中顯示的實際內容，如下所示：

                "COMP_STYLE_FLAT": "Flat",
                "COMP_STYLE_HIGHLIGHT": "Highlight",
                "COMP_STYLE_DIVIDER": "Divider",

design.css 檔案

design.css 檔案提供類別值的定義。以下是幾個範例。

.scs-title-default-style {
  color: #333333;
  display: block;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.scs-title-style-2 {
  background-color: #DEF300;
  color: #333333;
  font-family: adobe-clean, sans-serif;
  padding-top: 2em;
  padding-bottom: 2em; }

.scs-button-default-style .scs-button-button:hover {
  background: #f7f8f9;
  border: 1px solid #c4ced7;
  color: #0572ce;
  box-shadow: inset 0 1px 0 #f7f8f9;
  text-shadow: 0 1px 0 #f7f8f9; }

.scs-button-default-style .scs-button-button:active {
  background: #0572ce;
  border: 1px solid #0572ce;
  color: #fff;
  box-shadow: inset 0 1px 0 #0572ce;
  text-shadow: 0 1px 0 #0572ce; }