القائمة
Reference guide for deriving Dart naming and token layer from Figma token families in the OUDS Flutter project (raw, semantic and component tokens)
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Reference guide for OUDS Flutter accessibility rules and patterns — Semantics, MergeSemantics, ExcludeSemantics, text scale, high-contrast, screen readers (TalkBack / VoiceOver), orientation, bug diagnosis and enhancement
How to set up and use the OUDS Flutter framework with imports, themes, tokens, localizations, theme tweaks, and available components with code examples
How to migrate to OUDS Flutter — from native Flutter components, custom/branded components, or across OUDS library versions — with before/after mappings and required actions
Reference guide for OUDS Flutter vocabulary and core concepts (Tokenator, token types, theme, theme tweak, theme config, token provider, component)
| name | ouds-flutter-figma-to-dart |
| description | Reference guide for deriving Dart naming and token layer from Figma token families in the OUDS Flutter project (raw, semantic and component tokens) |
| license | MIT |
Agent optimization: See copilot-instructions.md §9 for token-efficient response guidelines.
This skill applies to token mapping in the OUDS Flutter repository. Use it when translating Figma tokens to Flutter/Dart naming, not for OUDS web, Android native, or iOS native platforms.
TOKEN LAYERS IN THIS REPOSITORY
Raw tokens → `ouds_global_raw_tokens/lib/*.dart`
Semantic tokens → `ouds_theme_contract/lib/theme/tokens/semantic/*.dart`
Component tokens → `ouds_theme_contract/lib/theme/tokens/components/*.dart`
Theme values → implemented in `ouds_theme_orange/`, `ouds_theme_sosh/`, etc.
LOOKUP ORDER
1. Identify whether the Figma item is raw / semantic / component scoped
2. Find the corresponding generated abstract token file in `ouds_theme_contract`
3. Find the concrete brand implementation in each theme package
4. Consume the value through `OudsTheme.of(context)` — never by editing generated files
STOP IMMEDIATELY
- If the task asks to manually edit generated token files
- If the token file is under `ouds_global_raw_tokens`, `ouds_theme_contract`,
`ouds_theme_orange`, `ouds_theme_orange_compact`, `ouds_theme_sosh`, or `ouds_theme_wireframe`
Raw token files live in ouds_global_raw_tokens/lib/.
| Family | File | Example names |
|---|---|---|
| Border | border_raw_tokens.dart | raw border constants |
| Color | color_raw_tokens.dart | raw color constants |
| Dimension | dimension_raw_tokens.dart | dimension200, dimensionOutOfSystem25 |
| Effect | effect_raw_tokens.dart | raw effect constants |
| Elevation | elevation_raw_tokens.dart | raw elevation constants |
| Font | font_raw_tokens.dart | raw font constants |
| Grid | grid_raw_tokens.dart | raw grid constants |
| Opacity | opacity_raw_tokens.dart | raw opacity constants |
Example:
DimensionRawTokens.dimension200
DimensionRawTokens.dimensionOutOfSystem25
Semantic token interfaces live in ouds_theme_contract/lib/theme/tokens/semantic/.
| Semantic family | File | Typical access |
|---|---|---|
| Border | ouds_border_semantic_tokens.dart | via theme border / scheme APIs |
| Color | ouds_color_semantic_tokens.dart | theme.colorScheme(context) |
| Elevation | ouds_elevation_semantic_tokens.dart | via theme providers |
| Font | ouds_font_semantic_tokens.dart | theme.typographyTokens / font tokens |
| Grid | ouds_grid_semantic_tokens.dart | theme.gridScheme(context) |
| Opacity | ouds_opacity_semantic_tokens.dart | via providers |
| Size | ouds_size_semantic_tokens.dart | theme.sizeScheme(context) |
| Space | ouds_space_semantic_tokens.dart | theme.spaceScheme(context) |
Component token interfaces live in ouds_theme_contract/lib/theme/tokens/components/.
| Component | File | Typical access |
|---|---|---|
| Alert | ouds_alert_tokens.dart | theme.componentsTokens(context).alert |
| Badge | ouds_badge_tokens.dart | theme.componentsTokens(context).badge |
| Bar | ouds_bar_tokens.dart | theme.componentsTokens(context).bar |
| Bullet list | ouds_bulletList_tokens.dart | theme.componentsTokens(context).bulletList |
| Button | ouds_button_tokens.dart | theme.componentsTokens(context).button |
| Button mono | ouds_buttonMono_tokens.dart | mono button token group |
| Checkbox | ouds_checkbox_tokens.dart | theme.componentsTokens(context).checkbox |
| Chip | ouds_chip_tokens.dart | theme.componentsTokens(context).chip |
| Control item | ouds_controlItem_tokens.dart | shared item tokens |
| Divider | ouds_divider_tokens.dart | theme.componentsTokens(context).divider |
| Icon | ouds_icon_tokens.dart | theme.componentsTokens(context).icon |
| Input tag | ouds_inputTag_tokens.dart | theme.componentsTokens(context).inputTag |
| Link | ouds_link_tokens.dart | theme.componentsTokens(context).link |
| Link mono | ouds_linkMono_tokens.dart | mono link token group |
| Pin code input | ouds_pinCodeInput_tokens.dart | theme.componentsTokens(context).pinCodeInput |
| Radio button | ouds_radioButton_tokens.dart | theme.componentsTokens(context).radioButton |
| Skeleton | ouds_skeleton_tokens.dart | theme.componentsTokens(context).skeleton |
| Switch | ouds_switch_tokens.dart | theme.componentsTokens(context).switch |
| Tag | ouds_tag_tokens.dart | theme.componentsTokens(context).tag |
| Text input | ouds_textInput_tokens.dart | theme.componentsTokens(context).textInput |
Observed naming patterns:
textInput, pinCodeInput, radioButtonborder, color, size, spaceExamples from generated files:
// Button tokens
borderRadiusDefault
colorBgDefaultEnabled
colorContentBrandPressed
sizeMinHeight
spacePaddingInlineIconStart
// Text input tokens
colorBorderEnabled
sizeCountrySelectorFlagHeight
spaceColumnGapLabelAsterisk
spacePaddingInlineCountrySelectorStart
spaceRowGapLabelInput
When a user gives you a Figma token name or token family:
ouds_theme_contract/lib/theme/tokens/ouds_theme_orange/ouds_theme_orange_compact/ouds_theme_sosh/ouds_theme_wireframe/OudsTheme.of(context) accessors| Need | Flutter lookup |
|---|---|
| Raw spacing / dimension scale | ouds_global_raw_tokens/lib/dimension_raw_tokens.dart |
| Semantic spacing token | OudsTheme.of(context).spaceScheme(context).fixedMedium |
| Semantic responsive spacing | OudsTheme.of(context).spaceScheme(context).scaled3xsmallMobile |
| Component button background token | OudsTheme.of(context).componentsTokens(context).button.colorBgDefaultEnabled |
| Component text input spacing token | OudsTheme.of(context).componentsTokens(context).textInput.spaceColumnGapLabelAsterisk |
| Typography token | OudsTheme.of(context).typographyTokens |
| Component token interface definition | ouds_theme_contract/lib/theme/tokens/components/... |
| Raw token definition | ouds_global_raw_tokens/lib/... |
ouds_global_raw_tokens, ouds_theme_contract, ouds_theme_orange, ouds_theme_orange_compact, ouds_theme_sosh, and ouds_theme_wireframe are generated by Tokenator and must not be edited manually.OudsTheme.of(context).spaceScheme(context)OudsTheme.of(context).colorScheme(context)OudsTheme.of(context).typographyTokensOudsTheme.of(context).componentsTokens(context)