diff --git a/PROJECT_NOTES.md b/PROJECT_NOTES.md index b94deaa..1143503 100644 --- a/PROJECT_NOTES.md +++ b/PROJECT_NOTES.md @@ -32,11 +32,12 @@ - Добавлены npm-скрипты: `build`, `build:vue`, `dev`, `start`, `test:e2e`, `test:visual`, `test:vue-adapter`, `build:example:vue`. - Playwright добавлен в devDependencies; Chromium установлен; smoke test проходит. - Создана структура исходников и документации. -- **Токены из Figma вытащены и применены:** - - `src/scss/_palette-colors.scss` — primitive scales (neutral, lavender, mint, yellow) и semantic primitives. - - `src/scss/_design-tokens.scss` — semantic surfaces, borders, motion, radius placeholders, focus. +- **Токены из Figma выгружены и применены:** + - `figma design parts/vars/` — JSON-экспорт variables (global, Mode 1, borderWidth, radius). + - `src/scss/_palette-colors.scss` — primitive scales (neutral с шагом 25, lavender, mint, yellow) и semantic primitives. + - `src/scss/_design-tokens.scss` — semantic surfaces, borders, полный radius scale (xs/sm/md/lg/xl/2xl/full). - `src/scss/_fonts.scss` — Plus Jakarta Sans + полная типографическая шкала. - - `docs/style-guide.md` — человекочитаемая документация по токенам. + - `docs/style-guide.md` — актуальная документация по токенам. - **Иконки подключены:** - 967 SVG-иконок распакованы в `public/assets/icons/svg/`. - Все `stroke="black"`/`fill="black"` заменены на `currentColor`. @@ -61,12 +62,12 @@ ### Что нужно сделать -1. Уточнить radius-токены через Playwright-сравнение с компонентными фреймами. +1. ~~Уточнить radius-токены~~ — зафиксированы по `radius.tokens.json`. 2. Зафиксировать spacing scale (если в Figma есть отдельная страница — найти; иначе оставить текущую). 3. Реализовать foundation-компоненты demo: Typography, Palette, Utilities. 4. Реализовать базовые компоненты и Vue-адаптеры (Input, Badge, Alert и т.д.). 5. Обновить `docs/component-coverage.md` по мере добавления компонентов. -6. Создать визуальные Playwright-тесты для сравнения компонентов с Figma-экспортами. +6. Создать визуальные Playwright-тесты для сравнения компонентов с PNG-экспортами в `figma design parts/frames/`. ## Заметки по reference @@ -78,6 +79,6 @@ ## Риски и открытые вопросы -- Figma REST token не имеет scope `file_variables:read`, поэтому переменные пришлось вытаскивать через PNG-экспорт. Это ограничивает точность, но базовые токены получены. -- Нужно подключить Plus Jakarta Sans — либо скачать локально, либо через Google Fonts / npm пакет. +- Figma REST API ограничен на бесплатном аккаунте (Tier 1 — 6 запросов `/files` в месяц для View/Collab). Переменные выгружены через UI-экспорт (`figma design parts/vars/`), что надёжнее API. +- Plus Jakarta Sans подключён через Google Fonts в demo; можно заменить на self-hosted при необходимости. - Нужно ли сохранять `dist/js/vmk-ui-kit.js` global namespace как `VMKUIKit` или дублировать под `GNexusUIKit` для совместимости? (Пока выбран `VMKUIKit`, потому что пакет новый.) diff --git a/demo/partials/palette.html b/demo/partials/palette.html index 43d0a19..8d1d481 100644 --- a/demo/partials/palette.html +++ b/demo/partials/palette.html @@ -3,7 +3,8 @@

Neutral

-
0 #FCFCFC
+
0 #FFFFFF
+
25 #FCFCFC
50 #F7F7F8
100 #F0F0F0
200 #E1E2E3
@@ -13,7 +14,7 @@
600 #82868D
700 #6B7280
800 #3F4145
-
900 #1A1A1A
+
900 #1F1F1F

Mint

@@ -39,7 +40,7 @@
Success bg #DDF3E4
Success text #1E7A46
-
Warning bg #FEF0DD
+
Warning bg #FEF3E5
Warning text #B45309
Info bg #EAF4FE
Info text #2563A6
diff --git a/demo/partials/utilities.html b/demo/partials/utilities.html index 9f97052..a787bea 100644 --- a/demo/partials/utilities.html +++ b/demo/partials/utilities.html @@ -27,10 +27,12 @@

Radius tokens

+
+
diff --git a/docs/style-guide.md b/docs/style-guide.md index 6c8548a..926f2fc 100644 --- a/docs/style-guide.md +++ b/docs/style-guide.md @@ -16,7 +16,8 @@ | Шаг | Hex | |-----|-----| -| 0 | `#FCFCFC` | +| 0 | `#FFFFFF` | +| 25 | `#FCFCFC` | | 50 | `#F7F7F8` | | 100 | `#F0F0F0` | | 200 | `#E1E2E3` | @@ -26,7 +27,7 @@ | 600 | `#82868D` | | 700 | `#6B7280` | | 800 | `#3F4145` | -| 900 | `#1A1A1A` | +| 900 | `#1F1F1F` | #### Lavender @@ -53,31 +54,40 @@ | danger | `#FBE4E2` | `#D64545` | | info | `#EAF4FE` | `#2563A6` | | success | `#DDF3E4` | `#1E7A46` | -| warning | `#FEF0DD` | `#B45309` | +| warning | `#FEF3E5` | `#B45309` | ### Semantic aliases | Имя | Значение | Описание | |-----|----------|----------| -| `$surface-page` | `neutral-0` | Основной фон страницы | -| `$surface-primary` | `neutral-0` | Основная поверхность | -| `$surface-secondary` | `mint-300` | Вторичная поверхность | -| `$surface-accent` | `yellow-300` | Акцентная поверхность | -| `$surface-surface` | `neutral-100`| Фон карточек/панелей | -| `$border-color-base` | `neutral-900` | Основной бордер | -| `$border-color-muted` | `neutral-300` | Вторичный бордер | +| `$surface-page` | `neutral-0` | Основной фон страницы | +| `$surface-primary` | `neutral-50` | Основная поверхность | +| `$surface-secondary` | `mint-300` | Вторичная поверхность | +| `$surface-accent` | `yellow-300` | Акцентная поверхность | +| `$surface-surface` | `neutral-100`| Фон карточек/панелей | +| `$border-color-base` | `neutral-300`| Основной бордер | +| `$border-color-muted`| `neutral-100`| Вторичный бордер | ## Радиусы +Радиус-шкала выгружена из `radius.tokens.json`. + | Токен | Значение | |-------|----------| -| `$radius-sm` | 6px | -| `$radius-md` | 10px | -| `$radius-lg` | 16px | -| `$radius-xl` | 24px | -| `$radius-full`| 9999px | +| `$radius-xs` | 4px | +| `$radius-sm` | 8px | +| `$radius-md` | 12px | +| `$radius-lg` | 16px | +| `$radius-xl` | 20px | +| `$radius-2xl` | 24px | +| `$radius-full` | 999px | -> Точные значения радиусов не были видны в Style Guide; подбираются и уточняются через Playwright-сравнение с компонентными фреймами. +Применение компонентов: +- buttons, badges, avatars, icon-buttons — `full`; +- inputs — `lg` (16px); +- cards — `xl` (20px); +- modals — `2xl` (24px); +- checkboxes — `xs` (4px). ## Типографика @@ -133,9 +143,9 @@ ## Иконки -- Phosphor Icons — единственный поддерживаемый набор. -- Всегда используйте base class `ph`: ``. -- В Vue icon props всегда с префиксом `ph-`. +- Набор иконок проекта — 967 custom SVG из `public/assets/icons/svg/`. +- Для совместимости с `gnexus-ui-kit` Vue-адаптер всё ещё принимает legacy `ph-` префиксы (`ph-x`, `ph-check`) и маппит их на VMK-ключи. +- Inline SVG-иконки рендерятся через `src/js/components/icon-helper.js` и Vue-компонент `VmkIcon`. ## Варианты diff --git a/figma design parts/frames/Alert.png b/figma design parts/frames/Alert.png new file mode 100644 index 0000000..391b4b0 --- /dev/null +++ b/figma design parts/frames/Alert.png Binary files differ diff --git a/figma design parts/frames/Attached File.png b/figma design parts/frames/Attached File.png new file mode 100644 index 0000000..c0a5875 --- /dev/null +++ b/figma design parts/frames/Attached File.png Binary files differ diff --git a/figma design parts/frames/Avatar.png b/figma design parts/frames/Avatar.png new file mode 100644 index 0000000..f332fbc --- /dev/null +++ b/figma design parts/frames/Avatar.png Binary files differ diff --git a/figma design parts/frames/Badges.png b/figma design parts/frames/Badges.png new file mode 100644 index 0000000..90dde1b --- /dev/null +++ b/figma design parts/frames/Badges.png Binary files differ diff --git a/figma design parts/frames/Bar.png b/figma design parts/frames/Bar.png new file mode 100644 index 0000000..8ee422f --- /dev/null +++ b/figma design parts/frames/Bar.png Binary files differ diff --git a/figma design parts/frames/Bottom Bar Container.png b/figma design parts/frames/Bottom Bar Container.png new file mode 100644 index 0000000..8c67d07 --- /dev/null +++ b/figma design parts/frames/Bottom Bar Container.png Binary files differ diff --git a/figma design parts/frames/Breadcrumbs.png b/figma design parts/frames/Breadcrumbs.png new file mode 100644 index 0000000..685d81d --- /dev/null +++ b/figma design parts/frames/Breadcrumbs.png Binary files differ diff --git a/figma design parts/frames/Bubble Chat.png b/figma design parts/frames/Bubble Chat.png new file mode 100644 index 0000000..cbeaf33 --- /dev/null +++ b/figma design parts/frames/Bubble Chat.png Binary files differ diff --git a/figma design parts/frames/Bullets & Dots.png b/figma design parts/frames/Bullets & Dots.png new file mode 100644 index 0000000..a751cd8 --- /dev/null +++ b/figma design parts/frames/Bullets & Dots.png Binary files differ diff --git a/figma design parts/frames/Button.png b/figma design parts/frames/Button.png new file mode 100644 index 0000000..fcf4605 --- /dev/null +++ b/figma design parts/frames/Button.png Binary files differ diff --git a/figma design parts/frames/Campain search card.png b/figma design parts/frames/Campain search card.png new file mode 100644 index 0000000..a15242f --- /dev/null +++ b/figma design parts/frames/Campain search card.png Binary files differ diff --git a/figma design parts/frames/Card - Campaign Type.png b/figma design parts/frames/Card - Campaign Type.png new file mode 100644 index 0000000..565dcb8 --- /dev/null +++ b/figma design parts/frames/Card - Campaign Type.png Binary files differ diff --git a/figma design parts/frames/Card - Campaign.png b/figma design parts/frames/Card - Campaign.png new file mode 100644 index 0000000..732043a --- /dev/null +++ b/figma design parts/frames/Card - Campaign.png Binary files differ diff --git a/figma design parts/frames/Card - Column.png b/figma design parts/frames/Card - Column.png new file mode 100644 index 0000000..fed7ca1 --- /dev/null +++ b/figma design parts/frames/Card - Column.png Binary files differ diff --git a/figma design parts/frames/Card - Folder Option.png b/figma design parts/frames/Card - Folder Option.png new file mode 100644 index 0000000..b329939 --- /dev/null +++ b/figma design parts/frames/Card - Folder Option.png Binary files differ diff --git a/figma design parts/frames/Card - Folder.png b/figma design parts/frames/Card - Folder.png new file mode 100644 index 0000000..d81e1e9 --- /dev/null +++ b/figma design parts/frames/Card - Folder.png Binary files differ diff --git a/figma design parts/frames/Card - History.png b/figma design parts/frames/Card - History.png new file mode 100644 index 0000000..7829a47 --- /dev/null +++ b/figma design parts/frames/Card - History.png Binary files differ diff --git a/figma design parts/frames/Card - Integrations.png b/figma design parts/frames/Card - Integrations.png new file mode 100644 index 0000000..0cb14d0 --- /dev/null +++ b/figma design parts/frames/Card - Integrations.png Binary files differ diff --git a/figma design parts/frames/Card - Scheduled Campaign.png b/figma design parts/frames/Card - Scheduled Campaign.png new file mode 100644 index 0000000..29aaa37 --- /dev/null +++ b/figma design parts/frames/Card - Scheduled Campaign.png Binary files differ diff --git a/figma design parts/frames/Card - Step.png b/figma design parts/frames/Card - Step.png new file mode 100644 index 0000000..161298e --- /dev/null +++ b/figma design parts/frames/Card - Step.png Binary files differ diff --git a/figma design parts/frames/Card.png b/figma design parts/frames/Card.png new file mode 100644 index 0000000..ea19f74 --- /dev/null +++ b/figma design parts/frames/Card.png Binary files differ diff --git a/figma design parts/frames/Cards and Components.png b/figma design parts/frames/Cards and Components.png new file mode 100644 index 0000000..7e2192c --- /dev/null +++ b/figma design parts/frames/Cards and Components.png Binary files differ diff --git a/figma design parts/frames/Characteristics Container.png b/figma design parts/frames/Characteristics Container.png new file mode 100644 index 0000000..2a811ec --- /dev/null +++ b/figma design parts/frames/Characteristics Container.png Binary files differ diff --git a/figma design parts/frames/Chat Messages & Bubbles.png b/figma design parts/frames/Chat Messages & Bubbles.png new file mode 100644 index 0000000..0927bbe --- /dev/null +++ b/figma design parts/frames/Chat Messages & Bubbles.png Binary files differ diff --git a/figma design parts/frames/Check Fill Icon.png b/figma design parts/frames/Check Fill Icon.png new file mode 100644 index 0000000..14be38c --- /dev/null +++ b/figma design parts/frames/Check Fill Icon.png Binary files differ diff --git a/figma design parts/frames/Client Card.png b/figma design parts/frames/Client Card.png new file mode 100644 index 0000000..0071f44 --- /dev/null +++ b/figma design parts/frames/Client Card.png Binary files differ diff --git a/figma design parts/frames/Contact search card.png b/figma design parts/frames/Contact search card.png new file mode 100644 index 0000000..05998a0 --- /dev/null +++ b/figma design parts/frames/Contact search card.png Binary files differ diff --git a/figma design parts/frames/Custom Icons.png b/figma design parts/frames/Custom Icons.png new file mode 100644 index 0000000..fcdb233 --- /dev/null +++ b/figma design parts/frames/Custom Icons.png Binary files differ diff --git a/figma design parts/frames/Description.png b/figma design parts/frames/Description.png new file mode 100644 index 0000000..0c6f6a7 --- /dev/null +++ b/figma design parts/frames/Description.png Binary files differ diff --git a/figma design parts/frames/Divider Container.png b/figma design parts/frames/Divider Container.png new file mode 100644 index 0000000..cd70fd2 --- /dev/null +++ b/figma design parts/frames/Divider Container.png Binary files differ diff --git a/figma design parts/frames/Document Container.png b/figma design parts/frames/Document Container.png new file mode 100644 index 0000000..e3d4a1a --- /dev/null +++ b/figma design parts/frames/Document Container.png Binary files differ diff --git a/figma design parts/frames/Dots Indicator.png b/figma design parts/frames/Dots Indicator.png new file mode 100644 index 0000000..8707717 --- /dev/null +++ b/figma design parts/frames/Dots Indicator.png Binary files differ diff --git a/figma design parts/frames/Dots.png b/figma design parts/frames/Dots.png new file mode 100644 index 0000000..5f8de3e --- /dev/null +++ b/figma design parts/frames/Dots.png Binary files differ diff --git a/figma design parts/frames/Element Card.png b/figma design parts/frames/Element Card.png new file mode 100644 index 0000000..e483f0d --- /dev/null +++ b/figma design parts/frames/Element Card.png Binary files differ diff --git a/figma design parts/frames/Footer.png b/figma design parts/frames/Footer.png new file mode 100644 index 0000000..ac24b5e --- /dev/null +++ b/figma design parts/frames/Footer.png Binary files differ diff --git a/figma design parts/frames/Forms.png b/figma design parts/frames/Forms.png new file mode 100644 index 0000000..5cdf284 --- /dev/null +++ b/figma design parts/frames/Forms.png Binary files differ diff --git a/figma design parts/frames/Frame 1618873115.png b/figma design parts/frames/Frame 1618873115.png new file mode 100644 index 0000000..bfb5d06 --- /dev/null +++ b/figma design parts/frames/Frame 1618873115.png Binary files differ diff --git a/figma design parts/frames/Frame 53.png b/figma design parts/frames/Frame 53.png new file mode 100644 index 0000000..30ec7c7 --- /dev/null +++ b/figma design parts/frames/Frame 53.png Binary files differ diff --git a/figma design parts/frames/Icon Container.png b/figma design parts/frames/Icon Container.png new file mode 100644 index 0000000..f064dab --- /dev/null +++ b/figma design parts/frames/Icon Container.png Binary files differ diff --git a/figma design parts/frames/Icon Decoration.png b/figma design parts/frames/Icon Decoration.png new file mode 100644 index 0000000..8be122a --- /dev/null +++ b/figma design parts/frames/Icon Decoration.png Binary files differ diff --git a/figma design parts/frames/Icon Indicator.png b/figma design parts/frames/Icon Indicator.png new file mode 100644 index 0000000..a1d0e23 --- /dev/null +++ b/figma design parts/frames/Icon Indicator.png Binary files differ diff --git a/figma design parts/frames/Image Template.png b/figma design parts/frames/Image Template.png new file mode 100644 index 0000000..d62654b --- /dev/null +++ b/figma design parts/frames/Image Template.png Binary files differ diff --git a/figma design parts/frames/Input Container Chat.png b/figma design parts/frames/Input Container Chat.png new file mode 100644 index 0000000..a948b30 --- /dev/null +++ b/figma design parts/frames/Input Container Chat.png Binary files differ diff --git a/figma design parts/frames/Input Container Messenger.png b/figma design parts/frames/Input Container Messenger.png new file mode 100644 index 0000000..a1a2c35 --- /dev/null +++ b/figma design parts/frames/Input Container Messenger.png Binary files differ diff --git a/figma design parts/frames/Line Indicator.png b/figma design parts/frames/Line Indicator.png new file mode 100644 index 0000000..71fad78 --- /dev/null +++ b/figma design parts/frames/Line Indicator.png Binary files differ diff --git a/figma design parts/frames/Messanger.png b/figma design parts/frames/Messanger.png new file mode 100644 index 0000000..26ef5eb --- /dev/null +++ b/figma design parts/frames/Messanger.png Binary files differ diff --git a/figma design parts/frames/Messenger Messages & Bubbles.png b/figma design parts/frames/Messenger Messages & Bubbles.png new file mode 100644 index 0000000..36a2edc --- /dev/null +++ b/figma design parts/frames/Messenger Messages & Bubbles.png Binary files differ diff --git a/figma design parts/frames/Multiple Option.png b/figma design parts/frames/Multiple Option.png new file mode 100644 index 0000000..87af611 --- /dev/null +++ b/figma design parts/frames/Multiple Option.png Binary files differ diff --git a/figma design parts/frames/Notification Button.png b/figma design parts/frames/Notification Button.png new file mode 100644 index 0000000..a1f19e7 --- /dev/null +++ b/figma design parts/frames/Notification Button.png Binary files differ diff --git a/figma design parts/frames/Number Progress Indicator.png b/figma design parts/frames/Number Progress Indicator.png new file mode 100644 index 0000000..36da81b --- /dev/null +++ b/figma design parts/frames/Number Progress Indicator.png Binary files differ diff --git a/figma design parts/frames/Option Card.png b/figma design parts/frames/Option Card.png new file mode 100644 index 0000000..56037ac --- /dev/null +++ b/figma design parts/frames/Option Card.png Binary files differ diff --git a/figma design parts/frames/Product List.png b/figma design parts/frames/Product List.png new file mode 100644 index 0000000..571231f --- /dev/null +++ b/figma design parts/frames/Product List.png Binary files differ diff --git a/figma design parts/frames/Profile.png b/figma design parts/frames/Profile.png new file mode 100644 index 0000000..128b14a --- /dev/null +++ b/figma design parts/frames/Profile.png Binary files differ diff --git a/figma design parts/frames/Row - Asset List.png b/figma design parts/frames/Row - Asset List.png new file mode 100644 index 0000000..268df2f --- /dev/null +++ b/figma design parts/frames/Row - Asset List.png Binary files differ diff --git "a/figma design parts/frames/Row - Audience contact list \050Analytics\051.png" "b/figma design parts/frames/Row - Audience contact list \050Analytics\051.png" new file mode 100644 index 0000000..2118c34 --- /dev/null +++ "b/figma design parts/frames/Row - Audience contact list \050Analytics\051.png" Binary files differ diff --git a/figma design parts/frames/Row - Audience contact list.png b/figma design parts/frames/Row - Audience contact list.png new file mode 100644 index 0000000..e3ee445 --- /dev/null +++ b/figma design parts/frames/Row - Audience contact list.png Binary files differ diff --git a/figma design parts/frames/Row - Order list.png b/figma design parts/frames/Row - Order list.png new file mode 100644 index 0000000..d5fc124 --- /dev/null +++ b/figma design parts/frames/Row - Order list.png Binary files differ diff --git a/figma design parts/frames/Single Option.png b/figma design parts/frames/Single Option.png new file mode 100644 index 0000000..664cc26 --- /dev/null +++ b/figma design parts/frames/Single Option.png Binary files differ diff --git a/figma design parts/frames/Sound wave.png b/figma design parts/frames/Sound wave.png new file mode 100644 index 0000000..2407275 --- /dev/null +++ b/figma design parts/frames/Sound wave.png Binary files differ diff --git a/figma design parts/frames/Suggestion - Option.png b/figma design parts/frames/Suggestion - Option.png new file mode 100644 index 0000000..002f400 --- /dev/null +++ b/figma design parts/frames/Suggestion - Option.png Binary files differ diff --git a/figma design parts/frames/Top Features Card.png b/figma design parts/frames/Top Features Card.png new file mode 100644 index 0000000..9b9713b --- /dev/null +++ b/figma design parts/frames/Top Features Card.png Binary files differ diff --git a/figma design parts/frames/Top Navbar.png b/figma design parts/frames/Top Navbar.png new file mode 100644 index 0000000..e84f94a --- /dev/null +++ b/figma design parts/frames/Top Navbar.png Binary files differ diff --git a/figma design parts/frames/Vertical Indicators.png b/figma design parts/frames/Vertical Indicators.png new file mode 100644 index 0000000..2606c76 --- /dev/null +++ b/figma design parts/frames/Vertical Indicators.png Binary files differ diff --git a/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Desktop.svg b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Desktop.svg new file mode 100644 index 0000000..29783f8 --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Desktop.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Mobile.svg b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Mobile.svg new file mode 100644 index 0000000..c032b87 --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Mobile.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Tablet.svg b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Tablet.svg new file mode 100644 index 0000000..5f07836 --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Gradient, Property 2=Tablet.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Desktop.svg b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Desktop.svg new file mode 100644 index 0000000..1a6ae94 --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Desktop.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Mobile.svg b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Mobile.svg new file mode 100644 index 0000000..c4586ec --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Mobile.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Tablet.svg b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Tablet.svg new file mode 100644 index 0000000..75067ce --- /dev/null +++ b/figma design parts/frames/backgrounds/Property 1=Shape, Property 2=Tablet.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/figma design parts/vars/Mode 1.tokens.json b/figma design parts/vars/Mode 1.tokens.json new file mode 100644 index 0000000..d457fe9 --- /dev/null +++ b/figma design parts/vars/Mode 1.tokens.json @@ -0,0 +1,851 @@ +{ + "radius": { + "button-primary": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:873", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a8759f2719c71033536a0dca5ee666a1f5ce85b5/-1:-1", + "targetVariableName": "full", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "button-secondary": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:874", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a8759f2719c71033536a0dca5ee666a1f5ce85b5/-1:-1", + "targetVariableName": "full", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "card": { + "$type": "number", + "$value": 20, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:875", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:d67b522a48be2889bfef6b51e07f2b8b97dab289/-1:-1", + "targetVariableName": "xl", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "surface-modal": { + "$type": "number", + "$value": 24, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:876", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:99124e439252a15da652f7993695900739caafa6/-1:-1", + "targetVariableName": "2xl", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "badge": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:877", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a8759f2719c71033536a0dca5ee666a1f5ce85b5/-1:-1", + "targetVariableName": "full", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "avatar": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:878", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a8759f2719c71033536a0dca5ee666a1f5ce85b5/-1:-1", + "targetVariableName": "full", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "icon-button": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:879", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a8759f2719c71033536a0dca5ee666a1f5ce85b5/-1:-1", + "targetVariableName": "full", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + }, + "input": { + "$type": "number", + "$value": 16, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:880", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:bf91fb469d2ea3085167c77db70f100c6610cfec/-1:-1", + "targetVariableName": "lg", + "targetVariableSetId": "VariableCollectionId:572fd45c3637b8b1242c333ef51cc71e7f02f942/-1:-1", + "targetVariableSetName": "radius" + } + } + } + }, + "color": { + "bg": { + "primary": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9686274528503418, + 0.9686274528503418, + 0.9725490212440491 + ], + "alpha": 1, + "hex": "#F7F7F8" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97849", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:35ff6fdeef62a5a4b8f67a4d28817b6763c9c24f/-1:-1", + "targetVariableName": "neutral/50", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "pure white": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 1, + 1 + ], + "alpha": 1, + "hex": "#FFFFFF" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006354:7381", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:de86b9f821c3f9fb59f61a3c0df469e2d5743adf/-1:-1", + "targetVariableName": "neutral/0", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "surface": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9411764740943909, + 0.9411764740943909, + 0.9411764740943909 + ], + "alpha": 1, + "hex": "#F0F0F0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98059", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:2827b03219a7b182382bfdd57bbecdb9f8077373/-1:-1", + "targetVariableName": "neutral/100", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "secondary": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8509804010391235, + 0.9333333373069763, + 0.9490196108818054 + ], + "alpha": 1, + "hex": "#D9EEF2" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97850", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:c5c19176ea2c1da6ecce246ebb366ab41b116b21/-1:-1", + "targetVariableName": "mint/300", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "accent": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9921568632125854, + 0.4627451002597809 + ], + "alpha": 1, + "hex": "#FCFD76" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97851", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:eeff803892c64b4195df466b2b78ccfdf6d48df2/-1:-1", + "targetVariableName": "yellow/300", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + }, + "text": { + "primary": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11999999731779099, + 0.11999999731779099, + 0.11999999731779099 + ], + "alpha": 1, + "hex": "#1F1F1F" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97852", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:443f1025e580eedd0c785190359a47b2a04e018f/-1:-1", + "targetVariableName": "neutral/900", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "accent": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.30588236451148987, + 0.5882353186607361, + 0.6274510025978088 + ], + "alpha": 1, + "hex": "#4E96A0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006387:13761", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:5ccfea5b256b4502ba9b40d9e2610f9e17bfa3aa/-1:-1", + "targetVariableName": "mint/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "secondary": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.41960784792900085, + 0.4470588266849518, + 0.501960813999176 + ], + "alpha": 1, + "hex": "#6B7280" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:98028", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:d22f1a14cdf215cd814c75b83da9428068ebb375/-1:-1", + "targetVariableName": "neutral/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "link": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.35686275362968445, + 0.3529411852359772, + 0.6117647290229797 + ], + "alpha": 1, + "hex": "#5B5A9C" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006357:40067", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a22198fb8fafd2219e8008e6596da6e7031329db/-1:-1", + "targetVariableName": "lavender/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "placeholder": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.6117647290229797, + 0.6392157077789307, + 0.686274528503418 + ], + "alpha": 1, + "hex": "#9CA3AF" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98060", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:0dca204f79f46e68878066ce6428b70824275c78/-1:-1", + "targetVariableName": "neutral/500", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "on-accent": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11999999731779099, + 0.11999999731779099, + 0.11999999731779099 + ], + "alpha": 1, + "hex": "#1F1F1F" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98061", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:443f1025e580eedd0c785190359a47b2a04e018f/-1:-1", + "targetVariableName": "neutral/900", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + }, + "border": { + "default": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8509804010391235, + 0.8509804010391235, + 0.8509804010391235 + ], + "alpha": 1, + "hex": "#D9D9D9" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98062", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:3ee7ebfc992d109982ac84a49f9c23a9cb85f9de/-1:-1", + "targetVariableName": "neutral/300", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "light": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9411764740943909, + 0.9411764740943909, + 0.9411764740943909 + ], + "alpha": 1, + "hex": "#F0F0F0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006354:5552", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:2827b03219a7b182382bfdd57bbecdb9f8077373/-1:-1", + "targetVariableName": "neutral/100", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "mint": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.4941176474094391, + 0.7529411911964417, + 0.7882353067398071 + ], + "alpha": 1, + "hex": "#7EC0C9" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006356:38150", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:2f63bfd2f356514bec9ac7370b5968ff15392f11/-1:-1", + "targetVariableName": "mint/600", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + }, + "action": { + "primary-bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11999999731779099, + 0.11999999731779099, + 0.11999999731779099 + ], + "alpha": 1, + "hex": "#1F1F1F" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98063", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:443f1025e580eedd0c785190359a47b2a04e018f/-1:-1", + "targetVariableName": "neutral/900", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "primary-text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9882352948188782, + 0.9882352948188782 + ], + "alpha": 1, + "hex": "#FCFCFC" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98064", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:ec9672f6052c708b5670c17289373a6d82452b28/-1:-1", + "targetVariableName": "neutral/25", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "cta-bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9921568632125854, + 0.4627451002597809 + ], + "alpha": 1, + "hex": "#FCFD76" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98065", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:eeff803892c64b4195df466b2b78ccfdf6d48df2/-1:-1", + "targetVariableName": "yellow/300", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "cta-icon": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11999999731779099, + 0.11999999731779099, + 0.11999999731779099 + ], + "alpha": 1, + "hex": "#1F1F1F" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98066", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:443f1025e580eedd0c785190359a47b2a04e018f/-1:-1", + "targetVariableName": "neutral/900", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "icon-light": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.41960784792900085, + 0.4470588266849518, + 0.501960813999176 + ], + "alpha": 1, + "hex": "#6B7280" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006385:13726", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:d22f1a14cdf215cd814c75b83da9428068ebb375/-1:-1", + "targetVariableName": "neutral/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "icon-accent": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.30588236451148987, + 0.5882353186607361, + 0.6274510025978088 + ], + "alpha": 1, + "hex": "#4E96A0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006387:13762", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:5ccfea5b256b4502ba9b40d9e2610f9e17bfa3aa/-1:-1", + "targetVariableName": "mint/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + }, + "status": { + "success-bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8666666746139526, + 0.9529411792755127, + 0.8941176533699036 + ], + "alpha": 1, + "hex": "#DDF3E4" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98067", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:5c5cf6899a1e693c9c799fcb50869c4eb653403b/-1:-1", + "targetVariableName": "success/bg", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "success-text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11764705926179886, + 0.47843137383461, + 0.27450981736183167 + ], + "alpha": 1, + "hex": "#1E7A46" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98068", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:425e62d840bcc63de160746172d8f1f8842ff792/-1:-1", + "targetVariableName": "success/text", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "warning-bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9960784316062927, + 0.9538205862045288, + 0.8964706063270569 + ], + "alpha": 1, + "hex": "#FEF3E5" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98069", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:078b1c4364d3616f0af1e823ae55d4e6c4f62ebb/-1:-1", + "targetVariableName": "warning/bg", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "warning-text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7058823704719543, + 0.32549020648002625, + 0.03529411926865578 + ], + "alpha": 1, + "hex": "#B45309" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98070", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:b36f3829b7598d95aeaff3d003744dbd53dd8a29/-1:-1", + "targetVariableName": "warning/text", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "danger-bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9843137264251709, + 0.8941176533699036, + 0.886274516582489 + ], + "alpha": 1, + "hex": "#FBE4E2" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98071", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:04c3e142945011d57fd3e3e0e39a4637e1fb83c8/-1:-1", + "targetVariableName": "danger/bg", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "danger-text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8392156958580017, + 0.2705882489681244, + 0.2705882489681244 + ], + "alpha": 1, + "hex": "#D64545" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98072", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:e6e86f1edad3231009e0770dcdf10d8f8852d3a1/-1:-1", + "targetVariableName": "danger/text", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + }, + "badge": { + "owner": { + "bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8470588326454163, + 0.843137264251709, + 0.9607843160629272 + ], + "alpha": 1, + "hex": "#D8D7F5" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:98029", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:e63a1574f99d36871cb357ec15b2d6587ca735bf/-1:-1", + "targetVariableName": "lavender/300", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + }, + "text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.35686275362968445, + 0.3529411852359772, + 0.6117647290229797 + ], + "alpha": 1, + "hex": "#5B5A9C" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:98031", + "com.figma.scopes": [ + "ALL_SCOPES" + ], + "com.figma.aliasData": { + "targetVariableId": "VariableID:a22198fb8fafd2219e8008e6596da6e7031329db/-1:-1", + "targetVariableName": "lavender/700", + "targetVariableSetId": "VariableCollectionId:84b69b3d65f23afc314c22cca5d9799130418930/-1:-1", + "targetVariableSetName": "primitives" + } + } + } + } + } + }, + "$extensions": { + "com.figma.modeName": "Mode 1" + } +} \ No newline at end of file diff --git a/figma design parts/vars/borderWidth.tokens.json b/figma design parts/vars/borderWidth.tokens.json new file mode 100644 index 0000000..054d0ac --- /dev/null +++ b/figma design parts/vars/borderWidth.tokens.json @@ -0,0 +1,45 @@ +{ + "hairline": { + "$type": "number", + "$value": 1, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:858", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "default": { + "$type": "number", + "$value": 1, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:859", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "thick": { + "$type": "number", + "$value": 2, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:860", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "thin": { + "$type": "number", + "$value": 0.5, + "$extensions": { + "com.figma.variableId": "VariableID:40006348:881", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "$extensions": { + "com.figma.modeName": "borderWidth" + } +} \ No newline at end of file diff --git a/figma design parts/vars/global.tokens.json b/figma design parts/vars/global.tokens.json new file mode 100644 index 0000000..addfb27 --- /dev/null +++ b/figma design parts/vars/global.tokens.json @@ -0,0 +1,971 @@ +{ + "yellow": { + "50": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9960784316062927, + 0.9960784316062927, + 0.9411764740943909 + ], + "alpha": 1, + "hex": "#FEFEF0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97803", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "100": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9921568632125854, + 0.9882352948188782, + 0.7215686440467834 + ], + "alpha": 1, + "hex": "#FDFCB8" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97804", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "200": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9843137264251709, + 0.5803921818733215 + ], + "alpha": 1, + "hex": "#FCFB94" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98040", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "300": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9921568632125854, + 0.4627451002597809 + ], + "alpha": 1, + "hex": "#FCFD76" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97805", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "400": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9411764740943909, + 0.9450980424880981, + 0.4000000059604645 + ], + "alpha": 1, + "hex": "#F0F166" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98041", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "500": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9098039269447327, + 0.9137254953384399, + 0.29019609093666077 + ], + "alpha": 1, + "hex": "#E8E94A" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97806", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "600": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8352941274642944, + 0.8392156958580017, + 0.21176470816135406 + ], + "alpha": 1, + "hex": "#D5D636" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98042", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "700": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7686274647712708, + 0.772549033164978, + 0.125490203499794 + ], + "alpha": 1, + "hex": "#C4C520" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97807", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "800": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.6509804129600525, + 0.6549019813537598, + 0.10588235408067703 + ], + "alpha": 1, + "hex": "#A6A71B" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98043", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "900": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.5411764979362488, + 0.545098066329956, + 0.07058823853731155 + ], + "alpha": 1, + "hex": "#8A8B12" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98044", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "neutral": { + "0": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 1, + 1 + ], + "alpha": 1, + "hex": "#FFFFFF" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006354:7380", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "25": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9882352948188782, + 0.9882352948188782, + 0.9882352948188782 + ], + "alpha": 1, + "hex": "#FCFCFC" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97808", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "50": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9686274528503418, + 0.9686274528503418, + 0.9725490212440491 + ], + "alpha": 1, + "hex": "#F7F7F8" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98033", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "100": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9411764740943909, + 0.9411764740943909, + 0.9411764740943909 + ], + "alpha": 1, + "hex": "#F0F0F0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97809", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "200": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8823529481887817, + 0.886274516582489, + 0.8901960849761963 + ], + "alpha": 1, + "hex": "#E1E2E3" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98034", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "300": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8509804010391235, + 0.8509804010391235, + 0.8509804010391235 + ], + "alpha": 1, + "hex": "#D9D9D9" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97810", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "400": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7176470756530762, + 0.729411780834198, + 0.7450980544090271 + ], + "alpha": 1, + "hex": "#B7BABE" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98035", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "500": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.6117647290229797, + 0.6392157077789307, + 0.686274528503418 + ], + "alpha": 1, + "hex": "#9CA3AF" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97811", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "600": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.5098039507865906, + 0.5254902243614197, + 0.5529412031173706 + ], + "alpha": 1, + "hex": "#82868D" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98036", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "700": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.41960784792900085, + 0.4470588266849518, + 0.501960813999176 + ], + "alpha": 1, + "hex": "#6B7280" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97812", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "800": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.24705882370471954, + 0.2549019753932953, + 0.2705882489681244 + ], + "alpha": 1, + "hex": "#3F4145" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98037", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "900": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11999999731779099, + 0.11999999731779099, + 0.11999999731779099 + ], + "alpha": 1, + "hex": "#1F1F1F" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97813", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "mint": { + "50": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9490196108818054, + 0.9803921580314636, + 0.9843137264251709 + ], + "alpha": 1, + "hex": "#F2FAFB" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97814", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "100": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9137254953384399, + 0.9647058844566345, + 0.9725490212440491 + ], + "alpha": 1, + "hex": "#E9F6F8" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98045", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "200": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8745098114013672, + 0.9450980424880981, + 0.95686274766922 + ], + "alpha": 1, + "hex": "#DFF1F4" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98046", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "300": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8509804010391235, + 0.9333333373069763, + 0.9490196108818054 + ], + "alpha": 1, + "hex": "#D9EEF2" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97815", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "400": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7450980544090271, + 0.8784313797950745, + 0.9019607901573181 + ], + "alpha": 1, + "hex": "#BEE0E6" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98047", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "500": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.6627451181411743, + 0.8470588326454163, + 0.8745098114013672 + ], + "alpha": 1, + "hex": "#A9D8DF" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97816", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "600": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.4941176474094391, + 0.7529411911964417, + 0.7882353067398071 + ], + "alpha": 1, + "hex": "#7EC0C9" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98048", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "700": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.30588236451148987, + 0.5882353186607361, + 0.6274510025978088 + ], + "alpha": 1, + "hex": "#4E96A0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98049", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "800": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.1921568661928177, + 0.40784314274787903, + 0.45098039507865906 + ], + "alpha": 1, + "hex": "#316873" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98050", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "900": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.12156862765550613, + 0.29411765933036804, + 0.32156863808631897 + ], + "alpha": 1, + "hex": "#1F4B52" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98051", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "lavender": { + "50": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.95686274766922, + 0.9529411792755127, + 0.9882352948188782 + ], + "alpha": 1, + "hex": "#F4F3FC" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97817", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "100": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9254902005195618, + 0.9215686321258545, + 0.9803921580314636 + ], + "alpha": 1, + "hex": "#ECEBFA" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98052", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "200": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8823529481887817, + 0.8784313797950745, + 0.9686274528503418 + ], + "alpha": 1, + "hex": "#E1E0F7" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98054", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "300": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8470588326454163, + 0.843137264251709, + 0.9607843160629272 + ], + "alpha": 1, + "hex": "#D8D7F5" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97818", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "400": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7529411911964417, + 0.7450980544090271, + 0.9411764740943909 + ], + "alpha": 1, + "hex": "#C0BEF0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98053", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "500": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.6313725709915161, + 0.6235294342041016, + 0.8784313797950745 + ], + "alpha": 1, + "hex": "#A19FE0" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98055", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "600": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.5176470875740051, + 0.5098039507865906, + 0.7686274647712708 + ], + "alpha": 1, + "hex": "#8482C4" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98056", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "700": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.35686275362968445, + 0.3529411852359772, + 0.6117647290229797 + ], + "alpha": 1, + "hex": "#5B5A9C" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97819", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "800": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.29019609093666077, + 0.2823529541492462, + 0.501960813999176 + ], + "alpha": 1, + "hex": "#4A4880" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98057", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "900": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.239215686917305, + 0.23137255012989044, + 0.47843137383461 + ], + "alpha": 1, + "hex": "#3D3B7A" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006340:98058", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "success": { + "bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8666666746139526, + 0.9529411792755127, + 0.8941176533699036 + ], + "alpha": 1, + "hex": "#DDF3E4" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97820", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.11764705926179886, + 0.47843137383461, + 0.27450981736183167 + ], + "alpha": 1, + "hex": "#1E7A46" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97821", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "danger": { + "bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9843137264251709, + 0.8941176533699036, + 0.886274516582489 + ], + "alpha": 1, + "hex": "#FBE4E2" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97822", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.8392156958580017, + 0.2705882489681244, + 0.2705882489681244 + ], + "alpha": 1, + "hex": "#D64545" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97823", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "info": { + "bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9176470637321472, + 0.95686274766922, + 0.9960784316062927 + ], + "alpha": 1, + "hex": "#EAF4FE" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97824", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.14509804546833038, + 0.38823530077934265, + 0.6509804129600525 + ], + "alpha": 1, + "hex": "#2563A6" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006337:97825", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "warning": { + "bg": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.9960784316062927, + 0.9538205862045288, + 0.8964706063270569 + ], + "alpha": 1, + "hex": "#FEF3E5" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98038", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "text": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.7058823704719543, + 0.32549020648002625, + 0.03529411926865578 + ], + "alpha": 1, + "hex": "#B45309" + }, + "$extensions": { + "com.figma.variableId": "VariableID:40006339:98039", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + } + }, + "$extensions": { + "com.figma.modeName": "global" + } +} \ No newline at end of file diff --git a/figma design parts/vars/radius.tokens.json b/figma design parts/vars/radius.tokens.json new file mode 100644 index 0000000..9e693c3 --- /dev/null +++ b/figma design parts/vars/radius.tokens.json @@ -0,0 +1,85 @@ +{ + "none": { + "$type": "number", + "$value": 0, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:850", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "xs": { + "$type": "number", + "$value": 4, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:851", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "sm": { + "$type": "number", + "$value": 8, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:852", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "md": { + "$type": "number", + "$value": 12, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:853", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "lg": { + "$type": "number", + "$value": 16, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:854", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "xl": { + "$type": "number", + "$value": 20, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:855", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "2xl": { + "$type": "number", + "$value": 24, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:856", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "full": { + "$type": "number", + "$value": 999, + "$extensions": { + "com.figma.variableId": "VariableID:40006347:857", + "com.figma.scopes": [ + "ALL_SCOPES" + ] + } + }, + "$extensions": { + "com.figma.modeName": "radius" + } +} \ No newline at end of file diff --git a/src/scss/_design-tokens.scss b/src/scss/_design-tokens.scss index 920f1be..72f3486 100644 --- a/src/scss/_design-tokens.scss +++ b/src/scss/_design-tokens.scss @@ -4,38 +4,41 @@ SURFACES ========================= */ -// Semantic surface aliases from Figma variable collection -$surface-page: $neutral-0; -$surface-primary: $neutral-0; -$surface-secondary:$mint-300; -$surface-accent: $yellow-300; -$surface-surface: $neutral-100; -$surface-panel: $neutral-100; -$surface-panel-muted: $neutral-50; +// Semantic surface aliases from Mode 1 tokens +$surface-page: $neutral-0; // pure white / page bg +$surface-primary: $neutral-50; // color.bg.primary +$surface-secondary:$mint-300; // color.bg.secondary +$surface-accent: $yellow-300; // color.bg.accent / cta-bg +$surface-surface: $neutral-100; // color.bg.surface +$surface-panel: $neutral-100; // color.bg.surface +$surface-panel-muted: $neutral-50; // color.bg.primary $surface-panel-strong: rgba($neutral-900, 0.08); /* ========================= BORDERS ========================= */ -$border-width-base: 1px; -$border-width-accent: 2px; -$border-style-base: solid; -$border-color-base: $neutral-900; -$border-color-muted: $neutral-300; +$border-width-hairline: 1px; +$border-width-base: 1px; +$border-width-thick: 2px; +$border-width-accent: 2px; +$border-style-base: solid; +$border-color-base: $neutral-300; // color.border.default +$border-color-muted: $neutral-100; // color.border.light +$border-color-mint: $mint-600; // color.border.mint /* ========================= RADIUS ========================= */ -// Figma kit uses rounded cards, buttons and inputs. -// Exact token was not visible in the style guide images; -// refine via Playwright comparison against component frames. -$radius-sm: 6px; -$radius-md: 10px; +// Radius scale from radius.tokens.json +$radius-xs: 4px; +$radius-sm: 8px; +$radius-md: 12px; $radius-lg: 16px; -$radius-xl: 24px; -$radius-full:9999px; +$radius-xl: 20px; // card radius +$radius-2xl: 24px; // surface-modal radius +$radius-full: 999px; // button/badge/avatar/icon-button /* ========================= MOTION diff --git a/src/scss/_palette-colors.scss b/src/scss/_palette-colors.scss index 1307fb7..6b25130 100644 --- a/src/scss/_palette-colors.scss +++ b/src/scss/_palette-colors.scss @@ -4,7 +4,8 @@ // ————————————————————————— // neutral -$neutral-0: #FCFCFC; +$neutral-0: #FFFFFF; +$neutral-25: #FCFCFC; $neutral-50: #F7F7F8; $neutral-100:#F0F0F0; $neutral-200:#E1E2E3; @@ -59,7 +60,7 @@ $info-text: #2563A6; $success-bg: #DDF3E4; $success-text:#1E7A46; -$warning-bg: #FEF0DD; +$warning-bg: #FEF3E5; $warning-text:#B45309; // convenience aliases used across components @@ -78,14 +79,14 @@ $color-neon-green: $success-text; // text tones -$color-text-light: $neutral-0; +$color-text-light: $neutral-25; $color-text-medium: $neutral-500; $color-text-dark: $neutral-700; -// UI state -$color-primary: $neutral-900; -$color-secondary: $mint-500; -$color-accent: $yellow-300; +// UI state (aligned with Mode 1 tokens) +$color-primary: $neutral-900; // action primary-bg +$color-secondary: $mint-700; // text.accent / icon-accent +$color-accent: $yellow-300; // cta-bg $color-success: $success-text; $color-warning: $warning-text; $color-error: $danger-text; diff --git a/src/scss/components/_alerts.scss b/src/scss/components/_alerts.scss index da8c89b..df06ce9 100644 --- a/src/scss/components/_alerts.scss +++ b/src/scss/components/_alerts.scss @@ -37,17 +37,17 @@ // Variants &.alert-primary { - background-color: $yellow-100; - color: $neutral-900; + background-color: $neutral-900; + color: $neutral-25; } &.alert-secondary { - background-color: $mint-50; - color: $mint-900; + background-color: $mint-300; + color: $neutral-900; } &.alert-accent { - background-color: $yellow-100; + background-color: $yellow-300; color: $neutral-900; } diff --git a/src/scss/components/_badges.scss b/src/scss/components/_badges.scss index e3e3e7e..dc71801 100644 --- a/src/scss/components/_badges.scss +++ b/src/scss/components/_badges.scss @@ -35,13 +35,13 @@ // Variants &.badge-primary { - background-color: $yellow-300; - color: $neutral-900; + background-color: $neutral-900; + color: $neutral-25; } &.badge-secondary { background-color: $mint-300; - color: $mint-900; + color: $neutral-900; } &.badge-accent { diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index d980c27..1100fc9 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -146,48 +146,56 @@ } // Variants -// Primary — filled yellow (Figma default) +// Primary — filled dark (Figma action.primary-bg) .btn-primary { + --btn-bg: #{$neutral-900}; + --btn-border: #{$neutral-900}; + --btn-text: #{$neutral-25}; + --btn-hover-bg: #{$neutral-800}; + --btn-hover-border: #{$neutral-800}; + --btn-focus-bg: #{$neutral-800}; + --btn-focus-border: #{$neutral-800}; + --btn-disabled-bg: #{$neutral-400}; + --btn-disabled-border: #{$neutral-400}; + --btn-disabled-text: #{$neutral-100}; +} + +// Accent — CTA yellow (Figma action.cta-bg) +.btn-accent { --btn-bg: #{$yellow-300}; --btn-border: #{$yellow-300}; --btn-text: #{$neutral-900}; --btn-hover-bg: #{$yellow-400}; --btn-hover-border: #{$yellow-400}; - --btn-focus-bg: #{$yellow-400}; - --btn-focus-border: #{$yellow-400}; + --btn-focus-bg: #{$yellow-500}; + --btn-focus-border: #{$yellow-500}; --btn-disabled-bg: #{$yellow-100}; --btn-disabled-border: #{$yellow-100}; --btn-disabled-text: #{$neutral-500}; } -// Accent maps to the same yellow surface as primary for compatibility with -// gnexus-ui-kit projects that used accent for the brand highlight. -.btn-accent { - @extend .btn-primary; -} - -// Secondary — white fill + mint border (Figma) +// Secondary — mint fill (Figma color.bg.secondary) .btn-secondary { - --btn-bg: #{$neutral-0}; - --btn-border: #{$mint-600}; - --btn-text: #{$mint-800}; - --btn-hover-bg: #{$mint-50}; - --btn-hover-border: #{$mint-600}; - --btn-focus-bg: #{$mint-100}; - --btn-focus-border: #{$mint-600}; - --btn-disabled-bg: #{$mint-50}; - --btn-disabled-border: #{$neutral-500}; + --btn-bg: #{$mint-300}; + --btn-border: #{$mint-300}; + --btn-text: #{$neutral-900}; + --btn-hover-bg: #{$mint-400}; + --btn-hover-border: #{$mint-400}; + --btn-focus-bg: #{$mint-500}; + --btn-focus-border: #{$mint-500}; + --btn-disabled-bg: #{$mint-100}; + --btn-disabled-border: #{$mint-100}; --btn-disabled-text: #{$neutral-500}; } -// Tertiary — transparent mint text (Figma) +// Tertiary — transparent dark text .btn-tertiary { --btn-bg: transparent; --btn-border: transparent; - --btn-text: #{$mint-900}; - --btn-hover-bg: #{rgba($mint-50, 0.64)}; + --btn-text: #{$neutral-900}; + --btn-hover-bg: #{rgba($neutral-100, 0.64)}; --btn-hover-border: transparent; - --btn-focus-bg: #{$mint-50}; + --btn-focus-bg: #{$neutral-100}; --btn-focus-border: transparent; --btn-disabled-bg: transparent; --btn-disabled-border: transparent; diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index 26c5fc3..dafe896 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -10,7 +10,7 @@ width: 100%; background-color: $neutral-0; border: 1px solid $neutral-200; - border-radius: $radius-lg; + border-radius: $radius-xl; overflow: hidden; transition: box-shadow $motion-base $motion-ease, @@ -57,13 +57,17 @@ } &.card-primary { - border-color: $yellow-300; - background-color: $yellow-50; + border-color: $neutral-900; + background-color: $neutral-900; + color: $neutral-25; + + .card-title, + .card-content { color: $neutral-25; } } &.card-secondary { border-color: $mint-300; - background-color: $mint-50; + background-color: $mint-300; } &.card-elevated { diff --git a/src/scss/components/_checkbox.scss b/src/scss/components/_checkbox.scss index 54834c5..bc4e2c7 100644 --- a/src/scss/components/_checkbox.scss +++ b/src/scss/components/_checkbox.scss @@ -31,8 +31,8 @@ display: flex; align-items: center; justify-content: center; - border: 1px solid $neutral-400; - border-radius: $radius-sm; + border: 1px solid $neutral-300; + border-radius: $radius-xs; background-color: $neutral-0; transition: border-color $motion-base $motion-ease, diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss index 657e4f7..b6c15cf 100644 --- a/src/scss/components/_forms.scss +++ b/src/scss/components/_forms.scss @@ -48,8 +48,8 @@ line-height: 1.25; color: $neutral-900; background-color: $neutral-0; - border: $border-width-base $border-style-base $neutral-400; - border-radius: $radius-md; + border: $border-width-base $border-style-base $neutral-300; + border-radius: $radius-lg; transition: border-color $motion-base $motion-ease, box-shadow $motion-base $motion-ease, diff --git a/src/scss/components/_modals.scss b/src/scss/components/_modals.scss index cf19115..560c5a6 100644 --- a/src/scss/components/_modals.scss +++ b/src/scss/components/_modals.scss @@ -46,7 +46,7 @@ display: flex; flex-direction: column; background-color: $neutral-0; - border-radius: $radius-lg; + border-radius: $radius-2xl; box-shadow: 0 24px 64px rgba($neutral-900, 0.24); overflow: hidden; opacity: 0; diff --git a/src/scss/components/_radio.scss b/src/scss/components/_radio.scss index 032e9e5..374b80a 100644 --- a/src/scss/components/_radio.scss +++ b/src/scss/components/_radio.scss @@ -28,7 +28,7 @@ width: 20px; height: 20px; flex-shrink: 0; - border: 1px solid $neutral-400; + border: 1px solid $neutral-300; border-radius: 50%; background-color: $neutral-0; position: relative; diff --git a/src/scss/components/_switch.scss b/src/scss/components/_switch.scss index d4aeacb..874ea1d 100644 --- a/src/scss/components/_switch.scss +++ b/src/scss/components/_switch.scss @@ -28,7 +28,7 @@ width: 44px; height: 24px; flex-shrink: 0; - border-radius: 9999px; + border-radius: $radius-full; background-color: $neutral-300; position: relative; transition: background-color $motion-base $motion-ease; diff --git a/src/scss/components/_toasts.scss b/src/scss/components/_toasts.scss index ac68487..5fca084 100644 --- a/src/scss/components/_toasts.scss +++ b/src/scss/components/_toasts.scss @@ -15,7 +15,7 @@ background: $neutral-0; border: $border-width-base $border-style-base $border-color-muted; border-left-width: $border-width-accent; - border-radius: $radius-md; + border-radius: $radius-lg; padding: 0; opacity: 0; overflow: hidden; diff --git a/src/scss/demo.scss b/src/scss/demo.scss index 572760c..1c81634 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -76,9 +76,11 @@ height: 48px; background-color: $mint-300; + &.radius-xs { border-radius: $radius-xs; } &.radius-sm { border-radius: $radius-sm; } &.radius-md { border-radius: $radius-md; } &.radius-lg { border-radius: $radius-lg; } &.radius-xl { border-radius: $radius-xl; } + &.radius-2xl { border-radius: $radius-2xl; } &.radius-full { border-radius: $radius-full; } }