デザインシステムの一連のトークンをパラメーター化することで、パラメーターに使用するオプションに応じて、実行時に一部またはすべてのトークンの値を変えることができます。
たとえば、アプリケーションにライトモードとダークモードを用意する場合です。このバリエーションは通常は色にのみ影響するため、TokensSetName にモードを表すパラメーターを追加し、値として Light と Dark を指定し、ライトモードとダークモードについて、モードに応じて変化する色のトークンの値を設定します。

実行時に選択される color-scheme オプションの値に応じて、OnSurface、Surface、Highlight の各色のトークンを使用するクラスにより、対応する値が変わり、それに応じて実行時の表示が変わります (Design System オブジェクトの生成時にはこれらが考慮され、選択されるパラメーターに応じて各トークンの対応セレクターが設定されます):

「デザインシステムのトークン」に一般的な構文を示しています。パラメーターや条件はオプションです:

tokens TokensSetName  [ (option1,...,optionN) ] 
'{'
        [ tokensDeclarations1 ] 
        ...
        [ tokensDeclarationsN ] 
'}'

構文の表記規則を見る
入力値の説明:
TokensSetName
      トークンの宣言のセットに与えられた名前。現在は、DSO で定義できるトークンの宣言は 1 つだけですが、将来は複数を使用できるようになる予定です。
option₁,...,option_N
      各オプションが次の形式になります:
                          option_name: ' [ 'value₁' ] ' '|' value₂ ...'|' value_N 

• option_name: 一部またはすべてのトークンの定義を変えることができる名前。color-scheme、mode、platform などの名前にすることができます。
• value₁: option_name が取り得る値。太字の大括弧は、このオプションが既定値であることを定義するために使用されます。
• value₂,...,value_N: option_name が取り得る値。

             注: 

• 値のリストは「|」で区切る必要があります。
• 値は引用符で囲みません。

tokensDeclarations
     各 tokenDeclaration は宣言されたオプションに対応しており、次の形式になります:

 [ option_condition ] 
'{'
        [ #token_group1 ] 
      '{'
                [ token_name1: value [ unit ] ;|valuewithData; ]  
                ...
                [ token_nameN: value [ unit ] ;|valuewithData; ] 
      '}' ]  
      ...
      [ #token_groupN ] | [ tokensDeclarations1 ] ... [ tokensDeclarationsN ]  
'}'

         各 option_condition は次の形式になります:
                          @option_name₁ = value_1i ... [ and @option_name_N = value_Nk ]

• option_name₁: TokensSetName のパラメーターの 1 つです。
• value_1i: option_name₁ の値の 1 つです。

例

tokens MyTokensSet (color-scheme:  [ Light ] |Dark, platform:  [ Native ] |Web Angular| Web)
{
       @color-scheme =  Light
       {
              #colors
              {
                      primary: black;
              }
       }

       @color-scheme = Light and @platform = Native
       {
              #colors
              {
                      primary: grey;
              }
              // その他
       }
       // その他
}

ネストも可能で、その場合は AND のように動作します:

tokens MyTokensSet (color-scheme:  [ Light ] |Dark, platform:  [ Native ] |Web Angular|Web)
{
       @color-scheme =  Light
       {
              #colors
              {
                      primary: black;
              }
              @platform = Native
              {
                    #colors
                    {
                             primary: grey;
                    }
                    // その他
              }
        }
        // その他
}

オプションの値を実行時に設定

パラメーターの値をコードで割り当て、変更できるよう、GeneXus モジュール内の Design System 外部オブジェクトに SetOption メソッドがあります。

実行時にオプションに値がなかった場合、オプションに応じた条件がないトークンのみに値が設定されます。そうでないものは値なしのままです。
このダーク/ライトの例は、説明のために用意されたものです。開発者は、このようなパラメーターを使用して任意のカスタムオプションを定義できます。このため、変化させるトークンを色に限定する理由はありません。条件はすべてのトークングループに設定できます。

画像のバリエーション

オプションに応じて実行時に画像を変えることも可能です。詳細については、「トークンのオプションに応じた画像のバリエーション」を参照してください。

トークンのインポート

DSO A またはそのトークンのセットのみを DSO B にインポートし (常に [ Styles ] エレメントより)、DSO B には必要のないオプションが定義されている場合 (DSO B のトークンはこれらのオプションによって変わらない)、DSO A のトークンは、パラメーターを再度宣言することなく DSO B のクラスで使用できます。
例:

Tokens DSOA_Tokens (option1: a|b)
{
       @option1 = a
       {
              #colors           
              {
                      primary: red;
       }
              }
       @option1 = b
       {
             #colors
             {
                      primary: blue;
             }
       }
}

Tokens DSOB_Tokens
{
       #colors
       {
               secondary: black;
       }
}

Styles DSOB_Styles
{
       @Import DSOA.tokens;
       .class1
       {
              color: $colors.primary;
              background-color: $colors.secondary;
       }
}

オブジェクトに関連付けられているスタイルが DSO B で、クラス class1 のテキストブロックが含まれるとします。テキストブロックのフォントは、option1 に設定されているオプションに応じて、実行時に赤か青になります。背景色は常に黒になります。
オプションを実行時に設定するには、SetOption メソッドをシームレスに使用できます。これはオプションが DSO 自体ではなく、インポートしたものにある場合も同様です。
この例では、次のようにオプションを設定できます:

DesignSystem.SetOption(option1, a)

コードは UI オブジェクト (任意のパネル) に設定する必要があります。そうしない場合は次のエラーが発生することがあります:

spc0200 External Object GeneXus\Common\UI\DesignSystem does not implement method 'setoption(' for X environment.

使用可能バージョン

GeneXus 17 Upgrade 6 以降。