最近のアクセス：
デザインシステムのトークン

トークンはデザインシステムの最も基本的なエレメントで、ビジュアルデザインやインタラクションデザインのオプションを取得できます。トークンを使用して、色、タイポグラフィ、間隔、時間、メディア、z-index、境界線、不透明度、サイズについて、プラットフォームに依存しない選択をモデル化できます。
これにより、デジタル製品に低価格のオプションを用意することができます。
デザインシステムにトークンを設定すると、製品の保守が容易になり、デザインの一貫性も向上します。

GeneXus のトークンの定義方法

GeneXus では、Design System オブジェクトを使用して、デザインシステムの一連のトークンを定義できます。
言語は宣言型で、異なるグループやカテゴリのトークンを定義できます。
GeneXus ではトークンをテキストで表示したり、視覚的に表示したりすることができます。
テキスト表示の場合は、編集/共有/比較が簡単です。一方、視覚的表示の場合は、トークンによるオプションの詳細を視覚的に把握できます。
両方のエディターが同期されているため、一方を操作すると、すぐに他方に反映されます。
イメージ:49366.gif

テキストエディター: トークン言語

トークンを特定の値に設定することが、デザインシステムのトークン言語の主要な機能です。
トークンは 2 つの必須エレメント (名前と値) で定義します。
トークン名の構文は CSS のプロパティ名と同様のルールに従います。さまざまな値を指定でき、各トークングループにより有効値が定義されます。
各トークンは、一連のトークンからなる大きな構造内で定義され、常にグループ内に属します:
tokens <TokensSetName>  [ ( ' [ '<option1>' ] ' ... [ , <optionN> ] ) ] 
'{'
       [ <option_condition>
      '{'
              [ #token_group1
            '{'
                      [ <token_name1> : <value> [  <unit>  ]  ; | <valuewithData> ; | <token_reference> ; ] 
                      ...
                      [ <token_nameN> : <value> [  <unit>  ]  ; | <valuewithData> ; | <token_reference> ; ] 
            '}' ] 
             ...
              [ #token_groupN ] 
     '}' ] 

'}'
「デザインシステムのクラスの記述スタイル」を参照してください。
入力値の説明:
TokensSetName
一連のトークンの宣言に付ける名前。現在は、DSO で定義できるトークンの宣言は 1 つだけですが、将来は複数を使用できるようになる予定です。
option1,...,optionN
(オプション)「option」と呼ばれるパラメーターとその有効値。これに従い、一部またはすべてのトークンの定義を変更できます。既定のオプションを示すために太字の大括弧を使用します。
option_condition
(オプション) この条件を満たすと、ここに含まれるトークンの定義が適用可能になります。条件はパラメーター (option) を参照します。
token_group
有効なトークングループの名前。トークンの有効なグループまたはタイプは事前定義されています:
colors | radius | spacing | borders | shadows | fontSizes | fonts | opacity | zindex | mediaqueries | times | timingfunction
例外的に custom グループを使用できます。このグループ内では任意のタイプのトークンを定義できます。これは慎重に使用してください。このグループ内のトークンの値は、使用先のクラスのプロパティと一致したタイプである必要があります。
token_name1,...,token_nameN
開発者が定義しているトークンの名前。はっきりとした意味を持つようにすることをお勧めします。大文字/小文字は区別されません。
value
option_condition を満たしたときにトークンがとる値。大文字/小文字は区別されません。値はグループによって異なります。たとえば、「colors」の場合は値が 16 進数になるか、RGBA 形式になります。あるいは「red」、「blue」のように、CSS またはネイティブプラットフォームで認識できる色の名前になります。これが「mediaQueries」の場合は、@media ルールに従う特定のブール式の条件になります。
unit
token_group に従う有効な単位 (「spacing」の場合は px、dip、em、%)。
valueWithData
option_condition を満たす場合にトークンがとる値。定義の意味を分かりやすくするため、説明などの追加情報を付加できます。形式は JSON オブジェクトで、値、説明、および第 1 レベルの info キーのみをサポートします。info は JSON オブジェクトで、任意の構造をサポートします。
token_reference
トークンの参照。値は定義されているトークンの値です。前述のように、トークンを参照する構文は次のようになります: $token_group.token_name。

例

Tokens MyTokensSet
{
       #colors
       {
              OnSurface: #191819;
              Surface:{
                           value: #FFFFFF;
                           description: “Represents the background color of the pages”; 
                           Info:  
                           {
                                 Version: 1,0
                           }
                       };
               Highlight: rgba(216, 40, 34, 1);
               Primary: $colors.OnSurface;
        }

        #fontSizes
        {
                H1: 95px;
                H2: 60px;
                Body-regular: 16dip;
         }
    
        #fonts
        {
               Title1: AbhayaLibre-Bold;
               Subtitle: Graphik-Semibold;
               Body-regular: Arial;
        }

        #mediaQueries
        {
               Xs: screen and (max-width: 767px);
               S: screen and (min-width: 768px) and (max-width: 991px);
               M: screen and (min-width: 992px) and (max-width: 1199px);
               L: screen and (min-width: 1200px);
        }

        #custom
        {
              Linear_Gradient_Background: linear-gradient(90deg, #000000 0%, #00FF007E 50%, #D7D7D700 100%);
              MobileTransformation: translateX(50px) rotate(45deg);
        }
}
ネイティブプラットフォームで Design System オブジェクトを使用する場合、トークンの単位が px から dip に自動変換されます。
#custom グループにより、トークンに複雑な値を追加できます。このグループのトークンは、後でほかのものと同じようにクラス (つまり、$custom.Linear_Gradient_Background) で参照されます。
パラメーターの使用法については、デザイン システム トークンのオプションを参照してください。

特徴

トークングループ (またはトークンタイプ) により、作成しているトークンの種類の意味を明確にすることができます。
トークンを使用できるコンテキストを読み手が明確に理解できます。さらに、トークンをさまざまな方法で編集または表示するためにツールが用意されています。たとえば、「times」グループ内のトークンは、アニメーションの表示時間などに使用される時間定数を表します。
このため、トークンは名前で参照するだけでなく、トークンが属するグループも指定する必要があります。トークングループが異なれば同じトークン名を繰り返して使用でき、これらは異なるトークンとして認識されます。上記の例には、Body-regular という名前の 2 つのトークンがあります。1 つは fontSizes グループに属し、もう 1 つは fonts グループに属しています。
同じグループ内 (および同じ条件) にトークンが複数回出現する場合、ファイルの最後の値が考慮されます。
例:
Tokens MyDesignSystemTokens
{
       #colors
       {
              Primary: green;
              Secondary: #D82822;
              Primary: #43624B;
        }
}
Primary というトークンがとる値は #43624B になります。

トークンが使用される箇所

トークンはデザインシステムのスタイルでクラスプロパティの「value」として使用されたり、一部のルールに使用されたりします。
参照する構文は次のとおりです:
$token_group.token_name
クラスプロパティの値ではなくトークンを参照することで、高いレベルの抽象化を実現できます。トークンの値を変更する必要がある場合、1 か所で変更すると、トークンを使用するすべてのクラスに自動的に影響を与えます。

トークンのインポート

一連のトークンを別の Design System オブジェクトにインポートできます。 [ Styles ] エレメントで Import ルールを使用し、トークンのみをインポートすることを指定します。
@import OtherDesignSystem.tokens;

インポートされたトークンと優先事項

DSO B から別の DSO A (またはそのトークンのみ) をインポートする場合、インポートされる DSO A のトークンを DSO B のクラスで使用できます。
重複する場合: トークンが DSO A で定義され、DSO B でも定義されている場合、インポート元の DSO (つまり、DSO B) で定義されたトークンが適用されます。
DSO A からのクラスまたはルールが DSO A で定義されたトークンを使用する場合に、トークンの値が DSO B で変更されると、変更された値は実行時に取得されます。値を使用するクラスやプロパティを書き換える必要はありません。

Web 開発におけるトークンの意味

生成のターゲットが Web の場合、GeneXus では、定義される各トークンに対して CSS カスタムプロパティが生成されます。
この変換を実行する際に、トークンはカテゴリ (グループ) のセマンティックを失います。したがって、CSS カスタムプロパティからトークンに変換することはできません。

パレットの色との関係

実際には、Color Palette オブジェクトは色のトークンのみを持つトークンセットです。トークンセットはカラーパレットの色のスーパーセットです。

使用可能バージョン

GeneXus 17 Upgrade 6 以降

サブページ
Created: 23/04/24 18:09 by Admin Last update: 24/03/25 23:57 by Admin
カテゴリ
Powered by GXwiki 3.0