Zapewnienie wzajemnie połączonych tokenów projektowych ze słownikiem stylów

Opanowanie sztuki wzajemnie połączonych tokenów projektowych

Podczas pracy z systemami projektowymi osiągnięcie płynnego połączenia między tokenami projektowymi ma kluczowe znaczenie dla spójności na różnych platformach. 🧩 Ale co się stanie, gdy Twoje tokeny stracą swoją hierarchię podczas kompilacji? To wyzwanie, przed którym staje wielu programistów.

Wyobraź sobie, że szczegółowo dzielisz tokeny projektowe na trzy poziomy — prymitywny, semantyczny i szczegółowy — tylko po to, by odkryć, że po przetworzeniu za pomocą Słownika stylów tracą one swoją współzależność. Wynik? Twoje semantyczne i specyficzne tokeny kończą się prymitywnymi wartościami, łamiąc zamierzoną hierarchię.

Z własnego doświadczenia wynika, że ​​właśnie z tym problemem spotkałem się przygotowując tokeny projektowe dla wielu systemów operacyjnych. Potrzebowałem rozwiązania, które zachowałoby połączoną strukturę moich plików JSON, zapewniając jednocześnie optymalizację danych wyjściowych pod kątem wdrożenia. 🚀

W tym przewodniku przeprowadzę Cię przez proces konfigurowania słownika stylów w celu utrzymania tych relacji, zapewniając, że Twoje tokeny pozostaną tak połączone, jak zamierzono. Niezależnie od tego, czy dopiero zaczynasz projektować tokeny, czy też rozwiązujesz podobny problem, te spostrzeżenia będą bezcenne. Zanurzmy się! 😊

Opanowanie eksportu tokenów projektu hierarchicznego

W dostarczonych skryptach głównym celem jest utrzymanie hierarchicznej struktury tokenów projektowych na wielu poziomach — pierwotnym, semantycznym i specyficznym. Korzystając ze Słownika stylów, wprowadzamy niestandardowe przekształcenia i formaty, aby zapewnić zachowanie relacji między tokenami podczas procesu eksportu. Na przykład metoda „registerTransform” dostosowuje sposób generowania nazw tokenów, używając formatu strukturalnego opartego na ich kategorii, typie i atrybutach elementu. To hierarchiczne nazewnictwo zapewnia przejrzystość i spójność kompilacji tokenów. 🛠️

Kolejną kluczową funkcją jest metoda „registerFormat”, która umożliwia eksport tokenów do ustrukturyzowanego pliku JSON. W tym formacie zachowywane są relacje tokenów zdefiniowane w oryginalnych danych wejściowych, co ułatwia ich implementację na różnych platformach. Wyobraź sobie pracę nad dużym projektem, w którym tokeny semantyczne, takie jak „kolor podstawowy”, odwołują się do tokenów pierwotnych, takich jak „blue-500” — zachowanie tej relacji podczas kompilacji jest niezbędne, aby zapobiec błędom implementacyjnym. Wykorzystując te funkcje, Style Dictionary staje się potężnym narzędziem do utrzymywania integralności tokenów.

W skrypcie opartym na Pythonie stosujemy funkcję rekurencyjną do poruszania się po zagnieżdżonych słownikach, zachowując hierarchię podczas transformacji tokenów projektowych. Na przykład, jeśli token „button.primary.background” odwołuje się do tokenu „color.primary”, funkcja zapewnia, że ​​te relacje pozostaną nienaruszone. Ta metoda jest szczególnie przydatna dla zespołów, które muszą pracować z tokenami projektowymi poza ekosystemem JavaScript, ponieważ Python oferuje dużą elastyczność w przetwarzaniu plików JSON. 🚀

Wreszcie, integracja testów jednostkowych przy użyciu Chai w skrypcie JavaScript dodaje krytyczną warstwę weryfikacji. Testy te zapewniają, że tokeny nie tylko poprawnie się kompilują, ale także zachowują zamierzone relacje. Na przykład jeden test sprawdza, czy tokeny semantyczne odwołują się do wartości pierwotnych zgodnie z oczekiwaniami, podczas gdy inny sprawdza, czy wszystkie trzy poziomy — pierwotny, semantyczny i specyficzny — są obecne w skompilowanym wyniku. Dzięki tym skryptom i praktykom systemy projektowe mogą efektywnie skalować się, zachowując spójność na różnych platformach, unikając potencjalnych pułapek i oszczędzając czas programowania. 😊

// Import the Style Dictionary package
const StyleDictionary = require('style-dictionary');

// Define the custom transform to maintain token hierarchy
StyleDictionary.registerTransform({
  name: 'custom/name-hierarchy',
  type: 'name',
  transformer: (token) => {
    return [token.attributes.category, token.attributes.type, token.attributes.item]
      .filter(Boolean)
      .join('.');
  }
});

// Define the custom format for interconnected design tokens
StyleDictionary.registerFormat({
  name: 'custom/json-structured',
  formatter: ({ dictionary }) => {
    return JSON.stringify(dictionary.tokens, null, 2);
  }
});

// Configure Style Dictionary with your custom settings
const StyleDictionaryConfig = {
  source: ['tokens//*.json'],
  platforms: {
    web: {
      transformGroup: 'custom/name-hierarchy',
      buildPath: 'build/web/',
      files: [{
        destination: 'tokens.json',
        format: 'custom/json-structured'
      }]
    }
  }
};

// Extend and build the Style Dictionary
const SD = StyleDictionary.extend(StyleDictionaryConfig);
SD.buildAllPlatforms();

import json

# Load design tokens from a JSON file
with open('tokens.json', 'r') as file:
    tokens = json.load(file)

# Function to recursively maintain hierarchy
def maintain_hierarchy(data):
    structured_tokens = {}
    for key, value in data.items():
        if isinstance(value, dict):
            structured_tokens[key] = maintain_hierarchy(value)
        else:
            structured_tokens[key] = value
    return structured_tokens

# Process tokens to maintain hierarchy
structured_tokens = maintain_hierarchy(tokens)

# Export processed tokens to a new JSON file
with open('structured_tokens.json', 'w') as file:
    json.dump(structured_tokens, file, indent=2)

const fs = require('fs');
const { expect } = require('chai');

// Load the compiled tokens
const tokens = JSON.parse(fs.readFileSync('build/web/tokens.json', 'utf-8'));

describe('Design Token Compilation', () => {
  it('should preserve the hierarchy in tokens', () => {
    expect(tokens.semantic).to.have.property('primary');
    expect(tokens.semantic.primary).to.equal(tokens.primitive.colorBlue);
  });

  it('should include all levels of tokens', () => {
    expect(tokens).to.have.property('primitive');
    expect(tokens).to.have.property('semantic');
    expect(tokens).to.have.property('specific');
  });
});

Zachowywanie relacji tokenów na różnych platformach

Jednym z przeoczonych aspektów pracy z tokenami projektowymi jest zapewnienie ich kompatybilności z różnymi platformami, takimi jak Internet, iOS i Android. Chociaż narzędzia takie jak Style Dictionary są potężne, wymagają starannej konfiguracji, aby mieć pewność, że tokeny zachowają zamierzoną strukturę. Na przykład tokeny semantyczne, takie jak „button.primary”, powinny odwoływać się do prymitywnych tokenów, takich jak „color.blue”, zamiast kodować na stałe ich wartości. To wzajemne powiązanie umożliwia programistom wprowadzanie zmian na poziomie pierwotnym i sprawdzanie aktualizacji odzwierciedlanych we wszystkich zależnych tokenach. 🌐

Aby osiągnąć kompatybilność specyficzną dla platformy, można dostosować niestandardowe przekształcenia i formaty dla każdego wyniku. Dzięki temu tokeny są nie tylko spójne, ale także zoptymalizowane pod kątem natywnych konwencji stylu platformy. Na przykład iOS może wymagać tokenów w formacie „.plist”, podczas gdy twórcy stron internetowych wolą zmienne JSON lub CSS. Korzystanie z tych wyspecjalizowanych wyników pozwala zachować integralność tokena, jednocześnie usprawniając wdrażanie dla różnych zespołów. Koncentrując się na tych aspektach, zespoły mogą tworzyć skalowalne systemy projektowe niezależne od platformy. 🚀

Kolejną kluczową kwestią jest integracja kontroli wersji i przepływów pracy opartych na współpracy. Przechowując pliki tokenów w repozytorium z kontrolą wersji i łącząc je z potokami CI/CD, aktualizacje tokenów można testować i wdrażać automatycznie. Gwarantuje to, że tokeny pozostaną aktualne na różnych platformach bez ręcznej interwencji, minimalizując błędy i utrzymując integralność systemu projektowego. Taka automatyzacja nie tylko oszczędza czas, ale także wspiera rosnące zespoły obsługujące złożone hierarchie tokenów. 😊