დაწყებაGet started

ტოკენებიTokens

ტოკენი არის სახელიანი დიზაინ-გადაწყვეტილება: ფერი, ზომა, რადიუსი. კომპონენტები როლს კითხულობს — მაგალითად --gds-primary — და თითოეული ბრენდი ამ როლს საკუთარ მნიშვნელობას ანიჭებს.

A token is a named design decision: a colour, a size, a radius. Components read a role — say --gds-primary — and each brand assigns that role its own value.

სამი ფენაThree layers

ფენაLayer	მაგალითიExample	ვინ იყენებსWho uses it
პრიმიტივიPrimitive	--gds-pd-teal-600	მხოლოდ ტოკენების ფაილი და ბრენდის გვერდებიOnly the token file and brand pages
სემანტიკურიSemantic	--gds-primary	ყველა UI კოდიAll UI code
ბრენდის ფენაBrand layer	[data-brand="pharmadepot"]	აპლიკაციის ძირითადი ელემენტიThe app's root element

სემანტიკური ტოკენებიSemantic tokens

მნიშვნელობები ცოცხალია და მიმდინარე ბრენდს აჩვენებს:Values are live and show the current brand: . დააჭირეთ მნიშვნელობას კოპირებისთვის.Click a value to copy it.

ტოკენიToken	მნიშვნელობაValue	როლიRole

ბრენდების შედარებაBrands side by side

ღია თემაLight theme

ტოკენიToken	GEPHA	GPC	ფარმადეპოPharmadepot

მუქი თემაDark theme

ტოკენიToken	GEPHA	GPC	ფარმადეპოPharmadepot

ფორმა და შრიფტიShape and type

ფერის გარდა ბრენდი ცვლის რადიუსებს და შრიფტს.

Besides colour, the brand also sets radii and fonts.

ტოკენიToken	GEPHA	GPC	ფარმადეპოPharmadepot
--gds-radius-button	8px	40px	40px
--gds-radius-input	8px	12px	12px
--gds-radius-card	12px	20px	20px
--gds-font-heading	Inter · Noto Sans Georgian	Graphik Georgian	Graphik Georgian
--gds-font-sans	Inter · Noto Sans Georgian	Avenir Next Georgian	Avenir Next Georgian

JSON

tokens.json tokens.css-დან გენერირდება. ბრენდის მნიშვნელობები brands გასაღებშია:

tokens.json is generated from tokens.css. Per-brand values live under brands:

import tokens from './tokens.json' with { type: 'json' };

const gpc = tokens.brands.gpc;
gpc.semantic.light.primary;   // "#006BCE"
gpc.semantic.dark.primary;    // "#73AEE4"
gpc.radius.button;            // "40px"

tokens.scale.pdTeal['600'];   // "#008486"

ზედა დონის brand, scale და semantic გასაღებები GEPHA-ს ეკუთვნის და წინა ვერსიასთან თავსებადია.

The top-level brand, scale and semantic keys are GEPHA's and stay compatible with the previous version.

დასახელებაNaming

--gds-{როლი} — ფონის ან ფერის როლი: primary, surface, danger.
--gds-on-{როლი} — ტექსტი ან იკონი ამ ფონზე. წყვილი ყოველთვის ≥ 4.5:1.
--gds-{როლი}-soft — ღია ფონი იმავე როლისთვის: მონიშვნა, შეტყობინება.
--gds-{ბრენდი}-{ფერი}-{50…900} — სკალის პრიმიტივი; 500 ბრენდის ფერია.

--gds-{role} — a fill or colour role: primary, surface, danger.
--gds-on-{role} — text or icons on that fill. The pair is always ≥ 4.5:1.
--gds-{role}-soft — a light fill for the same role: selection, alerts.
--gds-{brand}-{hue}-{50…900} — a scale primitive; 500 is the brand colour.