diff --git a/.changeset/wet-rings-roll.md b/.changeset/wet-rings-roll.md new file mode 100644 index 0000000000..c8ecd4efef --- /dev/null +++ b/.changeset/wet-rings-roll.md @@ -0,0 +1,5 @@ +--- +"@fluentui-react-native/design": patch +--- + +Add flex tokens draft shape diff --git a/packages/agentic-design/src/tokens/flex.types.ts b/packages/agentic-design/src/tokens/flex.types.ts new file mode 100644 index 0000000000..fb4eb8ede4 --- /dev/null +++ b/packages/agentic-design/src/tokens/flex.types.ts @@ -0,0 +1,448 @@ +import type { ColorValue, TextStyle, ViewStyle, DimensionValue } from 'react-native'; +import type { ShadowToken } from '../theming/Shadow.types'; + +type FontWeight = TextStyle['fontWeight']; +type FontSize = TextStyle['fontSize']; +type BorderRadius = ViewStyle['borderRadius']; +type StrokeWidth = ViewStyle['borderWidth']; + +/** + * Flat map of every semantic color token to its rest value. Keys are the + * camelCased `--gnrc-*` names, each prefixed with `color` so the color tokens + * can be merged into a single flat token object alongside future non-color + * tokens (spacing, radius, etc.). Interactive tokens carry only their rest + * value here; their `hover`/`pressed` states live in `SemanticColors`. + */ +export type SemanticColorTokenValues = { + // surface / neutral + colorSurfaceNeutralFarther: ColorValue; + colorSurfaceNeutralFar: ColorValue; + colorSurfaceNeutralNear: ColorValue; + colorSurfaceNeutralNearer: ColorValue; + colorSurfaceNeutralTranslucent: ColorValue; + + // background / neutral + colorBackgroundNeutralHeavy: ColorValue; + colorBackgroundNeutralLoud: ColorValue; + colorBackgroundNeutralSoft: ColorValue; + colorBackgroundNeutralSubtle: ColorValue; + colorBackgroundNeutralTransparent: ColorValue; + colorBackgroundNeutralTranslucent: ColorValue; + + // background / brand + colorBackgroundBrandHeavy: ColorValue; + colorBackgroundBrandLoud: ColorValue; + colorBackgroundBrandSoft: ColorValue; + colorBackgroundBrandSubtle: ColorValue; + colorBackgroundBrandTransparent: ColorValue; + + // background / danger + colorBackgroundDangerLoud: ColorValue; + colorBackgroundDangerSoft: ColorValue; + colorBackgroundDangerSubtle: ColorValue; + + // background / warning + colorBackgroundWarningLoud: ColorValue; + colorBackgroundWarningSoft: ColorValue; + colorBackgroundWarningSubtle: ColorValue; + + // background / success + colorBackgroundSuccessLoud: ColorValue; + colorBackgroundSuccessSoft: ColorValue; + colorBackgroundSuccessSubtle: ColorValue; + + // stroke / neutral + colorStrokeNeutralHeavy: ColorValue; + colorStrokeNeutralLoud: ColorValue; + colorStrokeNeutralSoft: ColorValue; + colorStrokeNeutralSubtle: ColorValue; + colorStrokeNeutralTransparent: ColorValue; + colorStrokeNeutralOnloud: ColorValue; + + // stroke / brand + colorStrokeBrandLoud: ColorValue; + colorStrokeBrandSoft: ColorValue; + colorStrokeBrandSubtle: ColorValue; + colorStrokeBrandOnloud: ColorValue; + + // stroke / danger + colorStrokeDangerLoud: ColorValue; + colorStrokeDangerSoft: ColorValue; + colorStrokeDangerSubtle: ColorValue; + colorStrokeDangerOnloud: ColorValue; + + // stroke / warning + colorStrokeWarningLoud: ColorValue; + colorStrokeWarningSoft: ColorValue; + colorStrokeWarningSubtle: ColorValue; + colorStrokeWarningOnloud: ColorValue; + + // stroke / success + colorStrokeSuccessLoud: ColorValue; + colorStrokeSuccessSoft: ColorValue; + colorStrokeSuccessSubtle: ColorValue; + colorStrokeSuccessOnloud: ColorValue; + + // foreground / neutral + colorForegroundNeutralPrimary: ColorValue; + colorForegroundNeutralSecondary: ColorValue; + colorForegroundNeutralTertiary: ColorValue; + colorForegroundNeutralOnloud: ColorValue; + + // foreground / brand + colorForegroundBrandPrimary: ColorValue; + colorForegroundBrandOnloud: ColorValue; + + // foreground / danger + colorForegroundDangerPrimary: ColorValue; + colorForegroundDangerOnloud: ColorValue; + + // foreground / warning + colorForegroundWarningPrimary: ColorValue; + colorForegroundWarningOnloud: ColorValue; + + // foreground / success + colorForegroundSuccessPrimary: ColorValue; + colorForegroundSuccessOnloud: ColorValue; + + // fixed + colorFixedWhite: ColorValue; + colorFixedBlack: ColorValue; + + // expression / accent + colorExpressionAccentHeavy: ColorValue; + colorExpressionAccentLoud: ColorValue; + colorExpressionAccentSoft: ColorValue; + colorExpressionAccentSubtle: ColorValue; + + // expression / achromatic + colorExpressionAchromaticHeavy: ColorValue; + colorExpressionAchromaticSubtle: ColorValue; + + // expression / gray + colorExpressionGrayHeavy: ColorValue; + colorExpressionGrayLoud: ColorValue; + colorExpressionGraySoft: ColorValue; + colorExpressionGraySubtle: ColorValue; + + // expression / navy + colorExpressionNavyHeavy: ColorValue; + colorExpressionNavyLoud: ColorValue; + colorExpressionNavySoft: ColorValue; + colorExpressionNavySubtle: ColorValue; + + // expression / blue + colorExpressionBlueHeavy: ColorValue; + colorExpressionBlueLoud: ColorValue; + colorExpressionBlueSoft: ColorValue; + colorExpressionBlueSubtle: ColorValue; + + // expression / green + colorExpressionGreenHeavy: ColorValue; + colorExpressionGreenLoud: ColorValue; + colorExpressionGreenSoft: ColorValue; + colorExpressionGreenSubtle: ColorValue; + + // expression / lime + colorExpressionLimeHeavy: ColorValue; + colorExpressionLimeLoud: ColorValue; + colorExpressionLimeSoft: ColorValue; + colorExpressionLimeSubtle: ColorValue; + + // expression / yellow + colorExpressionYellowHeavy: ColorValue; + colorExpressionYellowLoud: ColorValue; + colorExpressionYellowSoft: ColorValue; + colorExpressionYellowSubtle: ColorValue; + + // expression / pumpkin + colorExpressionPumpkinHeavy: ColorValue; + colorExpressionPumpkinLoud: ColorValue; + colorExpressionPumpkinSoft: ColorValue; + colorExpressionPumpkinSubtle: ColorValue; + + // expression / red + colorExpressionRedHeavy: ColorValue; + colorExpressionRedLoud: ColorValue; + colorExpressionRedSoft: ColorValue; + colorExpressionRedSubtle: ColorValue; + + // expression / pink + colorExpressionPinkHeavy: ColorValue; + colorExpressionPinkLoud: ColorValue; + colorExpressionPinkSoft: ColorValue; + colorExpressionPinkSubtle: ColorValue; + + // expression / purple + colorExpressionPurpleHeavy: ColorValue; + colorExpressionPurpleLoud: ColorValue; + colorExpressionPurpleSoft: ColorValue; + colorExpressionPurpleSubtle: ColorValue; + + // overlay + colorOverlayNeutralTranslucent: ColorValue; + + // material / background + colorMaterialBackgroundThick: ColorValue; + colorMaterialBackgroundRegular: ColorValue; + colorMaterialBackgroundThin: ColorValue; + + // disabled + colorBackgroundNeutralDisabled: ColorValue; + colorBackgroundNeutralHeavyDisabled: ColorValue; + colorBackgroundNeutralSubtleDisabled: ColorValue; + colorStrokeNeutralDisabled: ColorValue; + colorForegroundNeutralDisabled: ColorValue; + + // focus strokes + colorStrokeFocusInner: ColorValue; + colorStrokeFocusOuter: ColorValue; + + // shadow + colorShadow: ColorValue; +}; + +/** + * The subset of `SemanticColorTokenValues` that has interaction states. Used to + * shape the `hover` and `pressed` override maps on `SemanticColors`. + * + * Source of truth: `dev/web/flex-themes/css/interaction-fallback.css`. + */ +export type InteractiveColorOverrides = Pick< + SemanticColorTokenValues, + | 'colorSurfaceNeutralFarther' + | 'colorSurfaceNeutralFar' + | 'colorSurfaceNeutralNear' + | 'colorSurfaceNeutralNearer' + | 'colorSurfaceNeutralTranslucent' + | 'colorBackgroundNeutralHeavy' + | 'colorBackgroundNeutralLoud' + | 'colorBackgroundNeutralSoft' + | 'colorBackgroundNeutralSubtle' + | 'colorBackgroundNeutralTransparent' + | 'colorBackgroundNeutralTranslucent' + | 'colorBackgroundBrandHeavy' + | 'colorBackgroundBrandLoud' + | 'colorBackgroundBrandSoft' + | 'colorBackgroundBrandSubtle' + | 'colorBackgroundBrandTransparent' + | 'colorBackgroundDangerLoud' + | 'colorBackgroundDangerSoft' + | 'colorBackgroundDangerSubtle' + | 'colorBackgroundWarningLoud' + | 'colorBackgroundWarningSoft' + | 'colorBackgroundWarningSubtle' + | 'colorBackgroundSuccessLoud' + | 'colorBackgroundSuccessSoft' + | 'colorBackgroundSuccessSubtle' + | 'colorStrokeNeutralHeavy' + | 'colorStrokeNeutralLoud' + | 'colorStrokeNeutralSoft' + | 'colorStrokeNeutralSubtle' + | 'colorStrokeNeutralTransparent' + | 'colorStrokeNeutralOnloud' + | 'colorStrokeBrandLoud' + | 'colorStrokeBrandSoft' + | 'colorStrokeBrandSubtle' + | 'colorStrokeBrandOnloud' + | 'colorStrokeDangerLoud' + | 'colorStrokeDangerSoft' + | 'colorStrokeDangerSubtle' + | 'colorStrokeDangerOnloud' + | 'colorStrokeWarningLoud' + | 'colorStrokeWarningSoft' + | 'colorStrokeWarningSubtle' + | 'colorStrokeWarningOnloud' + | 'colorStrokeSuccessLoud' + | 'colorStrokeSuccessSoft' + | 'colorStrokeSuccessSubtle' + | 'colorStrokeSuccessOnloud' + | 'colorForegroundNeutralPrimary' + | 'colorForegroundNeutralSecondary' + | 'colorForegroundNeutralTertiary' + | 'colorForegroundNeutralOnloud' + | 'colorForegroundBrandPrimary' + | 'colorForegroundBrandOnloud' + | 'colorForegroundDangerPrimary' + | 'colorForegroundDangerOnloud' + | 'colorForegroundWarningPrimary' + | 'colorForegroundWarningOnloud' + | 'colorForegroundSuccessPrimary' + | 'colorForegroundSuccessOnloud' +>; + +/** + * The full semantic color token set: every token's rest value, plus `hover` and + * `pressed` maps that override only the interactive tokens. + */ +export type SemanticColors = SemanticColorTokenValues & { + hover: InteractiveColorOverrides; + pressed: InteractiveColorOverrides; +}; + +/** + * The complete semantic token set: all `SemanticColors` plus the non-color + * semantic tokens (shadows, font weights/families, letter spacing, font sizes, + * line heights, border radii, spacing, and stroke widths). Keys are the + * camelCased `--gnrc-*` names. + * + * Source of truth: `dev/web/flex-themes/css/semantic.css`. + */ +export type SemanticTokens = SemanticColors & { + // shadow + shadowLowest: ShadowToken; + shadowLower: ShadowToken; + shadowLow: ShadowToken; + shadowHigh: ShadowToken; + shadowHigher: ShadowToken; + shadowHighest: ShadowToken; + + // font weight + fontWeightFunctionalRegular: FontWeight; + fontWeightFunctionalMedium: FontWeight; + fontWeightFunctionalSemibold: FontWeight; + fontWeightFunctionalBold: FontWeight; + fontWeightContentRegular: FontWeight; + fontWeightContentMedium: FontWeight; + fontWeightContentSemibold: FontWeight; + fontWeightContentBold: FontWeight; + fontWeightContentEditorialRegular: FontWeight; + fontWeightContentEditorialMedium: FontWeight; + fontWeightContentEditorialSemibold: FontWeight; + fontWeightContentEditorialBold: FontWeight; + + // font family + fontFamilyFunctional: string; + fontFamilyContent: string; + fontFamilyContentEditorial: string; + fontFamilyContentCode: string; + + // font size + fontSizeFunctionalDisplay: FontSize; + fontSizeFunctionalPagetitle: FontSize; + fontSizeFunctionalTitleLarge: FontSize; + fontSizeFunctionalTitleMedium: FontSize; + fontSizeFunctionalTitleSmall: FontSize; + fontSizeFunctionalSubtitle: FontSize; + fontSizeFunctionalBodyLarge: FontSize; + fontSizeFunctionalBodyMedium: FontSize; + fontSizeFunctionalBodySmall: FontSize; + fontSizeFunctionalCaption: FontSize; + fontSizeContentStatement: FontSize; + fontSizeContentExpressiveLarge: FontSize; + fontSizeContentExpressiveMedium: FontSize; + fontSizeContentExpressiveSmall: FontSize; + fontSizeContentH1: FontSize; + fontSizeContentH2: FontSize; + fontSizeContentH3: FontSize; + fontSizeContentH4: FontSize; + fontSizeContentH5: FontSize; + fontSizeContentSubheadline: FontSize; + fontSizeContentParagraphLarge: FontSize; + fontSizeContentParagraphMedium: FontSize; + fontSizeContentParagraphSmall: FontSize; + fontSizeContentSubtext: FontSize; + fontSizeContentTable: FontSize; + fontSizeContentCode: FontSize; + + // line height + lineHeightFunctionalDisplay: number; + lineHeightFunctionalPagetitle: number; + lineHeightFunctionalTitleLarge: number; + lineHeightFunctionalTitleMedium: number; + lineHeightFunctionalTitleSmall: number; + lineHeightFunctionalSubtitle: number; + lineHeightFunctionalBodyLarge: number; + lineHeightFunctionalBodyMedium: number; + lineHeightFunctionalBodySmall: number; + lineHeightFunctionalCaption: number; + lineHeightContentStatement: number; + lineHeightContentExpressiveLarge: number; + lineHeightContentExpressiveMedium: number; + lineHeightContentExpressiveSmall: number; + lineHeightContentH1: number; + lineHeightContentH2: number; + lineHeightContentH3: number; + lineHeightContentH4: number; + lineHeightContentH5: number; + lineHeightContentSubheadline: number; + lineHeightContentParagraphLarge: number; + lineHeightContentParagraphMedium: number; + lineHeightContentParagraphSmall: number; + lineHeightContentSubtext: number; + lineHeightContentTable: number; + lineHeightContentCode: number; + + // border radius + borderRadiusBase100: BorderRadius; + borderRadiusBase200: BorderRadius; + borderRadiusBase300: BorderRadius; + borderRadiusBase400: BorderRadius; + borderRadiusBase600: BorderRadius; + borderRadiusBase700: BorderRadius; + borderRadiusCircular: BorderRadius; + + // spacing / component + spacingComponentBase50: DimensionValue; + spacingComponentBase100: DimensionValue; + spacingComponentBase150: DimensionValue; + spacingComponentBase200: DimensionValue; + spacingComponentBase250: DimensionValue; + spacingComponentBase300: DimensionValue; + spacingComponentBase400: DimensionValue; + spacingComponentBase500: DimensionValue; + spacingComponentBase600: DimensionValue; + spacingComponentBase700: DimensionValue; + + // spacing / layout + spacingLayoutBase100: DimensionValue; + spacingLayoutBase200: DimensionValue; + spacingLayoutBase300: DimensionValue; + spacingLayoutBase400: DimensionValue; + spacingLayoutBase450: DimensionValue; + spacingLayoutBase500: DimensionValue; + spacingLayoutBase600: DimensionValue; + spacingLayoutBase700: DimensionValue; + spacingLayoutBase800: DimensionValue; + spacingLayoutBase1000: DimensionValue; + spacingLayoutBase1200: DimensionValue; + + // stroke width + strokeWidthThin: StrokeWidth; + strokeWidthThick: StrokeWidth; + strokeWidthThicker: StrokeWidth; + strokeWidthThickest: StrokeWidth; +}; + +/** + * These are flex tokens from web that are not supported on native. + */ +export type UnsupportedFlexTokens = { + // letter spacing + letterSpacingFunctionalDisplay: string; + letterSpacingFunctionalPagetitle: string; + letterSpacingFunctionalTitleLarge: string; + letterSpacingFunctionalTitleMedium: string; + letterSpacingFunctionalTitleSmall: string; + letterSpacingFunctionalSubtitle: string; + letterSpacingFunctionalBodyLarge: string; + letterSpacingFunctionalBodyMedium: string; + letterSpacingFunctionalBodySmall: string; + letterSpacingFunctionalCaption: string; + letterSpacingContentStatement: string; + letterSpacingContentExpressiveLarge: string; + letterSpacingContentExpressiveMedium: string; + letterSpacingContentExpressiveSmall: string; + letterSpacingContentH1: string; + letterSpacingContentH2: string; + letterSpacingContentH3: string; + letterSpacingContentH4: string; + letterSpacingContentH5: string; + letterSpacingContentSubheadline: string; + letterSpacingContentParagraphLarge: string; + letterSpacingContentParagraphMedium: string; + letterSpacingContentParagraphSmall: string; + letterSpacingContentSubtext: string; + letterSpacingContentTable: string; + letterSpacingContentCode: string; +}; diff --git a/packages/agentic-design/src/tokens/mappings/fluent-token-map.json b/packages/agentic-design/src/tokens/mappings/fluent-token-map.json new file mode 100644 index 0000000000..2e6199a0e9 --- /dev/null +++ b/packages/agentic-design/src/tokens/mappings/fluent-token-map.json @@ -0,0 +1,145 @@ +{ + "_meta": { + "description": "Default-value source mapping: each flex React Native token resolves its default value from the referenced FluentUI React Native / Fluent 2 (v9-compatible) token. The value prefix names the source collection.", + "prefixes": { + "alias.": "Themed semantic alias token — @fluentui-react-native/design-tokens-windows {light,dark}/tokens-aliases.json (theme.colors.alias.color).", + "global.": "Raw global palette token — tokens-global.json, dot-path into the color tree (theme.colors.global.*). Theme-invariant.", + "shadow.": "Elevation shadow token — tokens-shadow.json (theme.shadows.*)." + }, + "direction": "flexToken <- fluentToken (key = flex RN token, value = prefixed Fluent token reference)", + "states": "Interactive alias-sourced tokens inherit alias interaction states: base uses .rest, hover. uses .hover, pressed. uses .pressed.", + "fluentSource": "@fluentui-react-native/design-tokens-windows@0.56.0", + "notes": [ + "global.* references are best-fit matches into the Fluent global palette; expression families map to the matching shared-color ramp step, gray to the grey ramp, alpha/translucent roles to the *Alpha ramps.", + "colorMaterialBackground* map to whiteAlpha fallbacks — platform acrylic/vibrancy material (WinUI AcrylicBrush / NSVisualEffectView) is preferred where available.", + "Non-color coverage here is limited to elevation shadow tokens; spacing/radius/typography/font-weight would source from Fluent global size/corner/font/stroke tokens." + ] + }, + "map": { + "colorSurfaceNeutralFarther": "alias.neutralBackground5", + "colorSurfaceNeutralFar": "alias.neutralBackground3", + "colorSurfaceNeutralNear": "alias.neutralBackground2", + "colorSurfaceNeutralNearer": "alias.neutralBackground1", + "colorSurfaceNeutralTranslucent": "global.color.whiteAlpha50", + "colorBackgroundNeutralHeavy": "alias.neutralBackgroundInverted", + "colorBackgroundNeutralLoud": "alias.neutralBackgroundInverted", + "colorBackgroundNeutralSoft": "global.color.blackAlpha10", + "colorBackgroundNeutralSubtle": "alias.subtleBackground", + "colorBackgroundNeutralTransparent": "alias.transparentBackground", + "colorBackgroundNeutralTranslucent": "global.color.whiteAlpha50", + "colorBackgroundBrandHeavy": "alias.brandBackground", + "colorBackgroundBrandLoud": "alias.compoundBrandBackground1", + "colorBackgroundBrandSoft": "alias.brandBackground2", + "colorBackgroundBrandSubtle": "alias.brandBackground2", + "colorBackgroundBrandTransparent": "alias.transparentBackground", + "colorBackgroundDangerLoud": "alias.dangerBackground3", + "colorBackgroundDangerSoft": "alias.dangerBackground2", + "colorBackgroundDangerSubtle": "alias.dangerBackground1", + "colorBackgroundWarningLoud": "alias.warningBackground3", + "colorBackgroundWarningSoft": "alias.warningBackground2", + "colorBackgroundWarningSubtle": "alias.warningBackground1", + "colorBackgroundSuccessLoud": "alias.successBackground3", + "colorBackgroundSuccessSoft": "alias.successBackground2", + "colorBackgroundSuccessSubtle": "alias.successBackground1", + "colorStrokeNeutralHeavy": "alias.neutralStrokeAccessible", + "colorStrokeNeutralLoud": "alias.neutralStroke1", + "colorStrokeNeutralSoft": "alias.neutralStroke1", + "colorStrokeNeutralSubtle": "alias.neutralStroke2", + "colorStrokeNeutralTransparent": "alias.transparentStroke", + "colorStrokeNeutralOnloud": "alias.neutralForegroundOnBrand", + "colorStrokeBrandLoud": "alias.brandStroke1", + "colorStrokeBrandSoft": "alias.brandStroke1", + "colorStrokeBrandSubtle": "alias.brandStroke2", + "colorStrokeBrandOnloud": "alias.neutralForegroundOnBrand", + "colorStrokeDangerLoud": "alias.dangerBorder2", + "colorStrokeDangerSoft": "alias.dangerBorder1", + "colorStrokeDangerSubtle": "alias.dangerBorder1", + "colorStrokeDangerOnloud": "alias.neutralForegroundOnBrand", + "colorStrokeWarningLoud": "alias.warningBorder2", + "colorStrokeWarningSoft": "alias.warningBorder1", + "colorStrokeWarningSubtle": "alias.warningBorder1", + "colorStrokeWarningOnloud": "alias.neutralForegroundOnBrand", + "colorStrokeSuccessLoud": "alias.successBorder2", + "colorStrokeSuccessSoft": "alias.successBorder1", + "colorStrokeSuccessSubtle": "alias.successBorder1", + "colorStrokeSuccessOnloud": "alias.neutralForegroundOnBrand", + "colorForegroundNeutralPrimary": "alias.neutralForeground1", + "colorForegroundNeutralSecondary": "alias.neutralForeground2", + "colorForegroundNeutralTertiary": "alias.neutralForeground3", + "colorForegroundNeutralOnloud": "alias.neutralForegroundOnBrand", + "colorForegroundBrandPrimary": "alias.brandForeground1", + "colorForegroundBrandOnloud": "alias.neutralForegroundOnBrand", + "colorForegroundDangerPrimary": "alias.dangerForeground1", + "colorForegroundDangerOnloud": "alias.neutralForegroundOnBrand", + "colorForegroundWarningPrimary": "alias.warningForeground1", + "colorForegroundWarningOnloud": "alias.neutralForegroundOnBrand", + "colorForegroundSuccessPrimary": "alias.successForeground1", + "colorForegroundSuccessOnloud": "alias.neutralForegroundOnBrand", + "colorFixedWhite": "global.color.white", + "colorFixedBlack": "global.color.black", + "colorExpressionAccentHeavy": "global.color.grey14", + "colorExpressionAccentLoud": "global.color.grey44", + "colorExpressionAccentSoft": "global.color.blackAlpha10", + "colorExpressionAccentSubtle": "global.color.blackAlpha5", + "colorExpressionAchromaticHeavy": "global.color.black", + "colorExpressionAchromaticSubtle": "global.color.white", + "colorExpressionGrayHeavy": "global.color.grey28", + "colorExpressionGrayLoud": "global.color.grey58", + "colorExpressionGraySoft": "global.color.grey88", + "colorExpressionGraySubtle": "global.color.grey96", + "colorExpressionNavyHeavy": "global.color.navy.shade20", + "colorExpressionNavyLoud": "global.color.navy.tint30", + "colorExpressionNavySoft": "global.color.navy.tint50", + "colorExpressionNavySubtle": "global.color.navy.tint60", + "colorExpressionBlueHeavy": "global.color.blue.shade30", + "colorExpressionBlueLoud": "global.color.blue.tint20", + "colorExpressionBlueSoft": "global.color.blue.tint50", + "colorExpressionBlueSubtle": "global.color.blue.tint60", + "colorExpressionGreenHeavy": "global.color.green.shade20", + "colorExpressionGreenLoud": "global.color.green.tint30", + "colorExpressionGreenSoft": "global.color.green.tint50", + "colorExpressionGreenSubtle": "global.color.green.tint60", + "colorExpressionLimeHeavy": "global.color.lime.shade30", + "colorExpressionLimeLoud": "global.color.lime.shade10", + "colorExpressionLimeSoft": "global.color.lime.tint40", + "colorExpressionLimeSubtle": "global.color.lime.tint50", + "colorExpressionYellowHeavy": "global.color.yellow.shade40", + "colorExpressionYellowLoud": "global.color.yellow.primary", + "colorExpressionYellowSoft": "global.color.yellow.tint30", + "colorExpressionYellowSubtle": "global.color.yellow.tint40", + "colorExpressionPumpkinHeavy": "global.color.pumpkin.shade30", + "colorExpressionPumpkinLoud": "global.color.pumpkin.tint30", + "colorExpressionPumpkinSoft": "global.color.pumpkin.tint50", + "colorExpressionPumpkinSubtle": "global.color.pumpkin.tint60", + "colorExpressionRedHeavy": "global.color.red.shade30", + "colorExpressionRedLoud": "global.color.red.tint20", + "colorExpressionRedSoft": "global.color.red.tint50", + "colorExpressionRedSubtle": "global.color.red.tint60", + "colorExpressionPinkHeavy": "global.color.pink.shade30", + "colorExpressionPinkLoud": "global.color.pink.tint10", + "colorExpressionPinkSoft": "global.color.pink.tint40", + "colorExpressionPinkSubtle": "global.color.pink.tint60", + "colorExpressionPurpleHeavy": "global.color.purple.shade10", + "colorExpressionPurpleLoud": "global.color.purple.tint30", + "colorExpressionPurpleSoft": "global.color.purple.tint50", + "colorExpressionPurpleSubtle": "global.color.purple.tint60", + "colorOverlayNeutralTranslucent": "global.color.whiteAlpha50", + "colorMaterialBackgroundThick": "global.color.whiteAlpha90", + "colorMaterialBackgroundRegular": "global.color.whiteAlpha80", + "colorMaterialBackgroundThin": "global.color.whiteAlpha50", + "colorBackgroundNeutralDisabled": "alias.neutralBackgroundDisabled", + "colorBackgroundNeutralHeavyDisabled": "alias.neutralBackgroundDisabled", + "colorBackgroundNeutralSubtleDisabled": "alias.neutralBackgroundDisabled", + "colorStrokeNeutralDisabled": "alias.neutralStrokeDisabled", + "colorForegroundNeutralDisabled": "alias.neutralForegroundDisabled", + "colorStrokeFocusInner": "alias.strokeFocus1", + "colorStrokeFocusOuter": "alias.strokeFocus2", + "colorShadow": "global.color.black", + "shadowLowest": "shadow.shadow2", + "shadowLower": "shadow.shadow4", + "shadowLow": "shadow.shadow8", + "shadowHigh": "shadow.shadow16", + "shadowHigher": "shadow.shadow28", + "shadowHighest": "shadow.shadow64" + } +} diff --git a/packages/agentic-design/src/tokens/mappings/fluent-token-map.noncolor.json b/packages/agentic-design/src/tokens/mappings/fluent-token-map.noncolor.json new file mode 100644 index 0000000000..cb5e8a9de2 --- /dev/null +++ b/packages/agentic-design/src/tokens/mappings/fluent-token-map.noncolor.json @@ -0,0 +1,150 @@ +{ + "_meta": { + "description": "Default-value source mapping for non-color flex React Native tokens (spacing, radius, stroke width, typography). Each token resolves to a FluentUI React Native / Fluent 2 (v9-compatible) global token.", + "prefixes": { + "global.": "Raw global token — tokens-global.json, dot-path into the global tree (theme.tokens.global.*). Theme-invariant." + }, + "direction": "flexToken <- fluentToken (key = flex RN token, value = prefixed Fluent global token reference)", + "fluentSource": "@fluentui-react-native/design-tokens-windows@0.56.0/light/tokens-global.json", + "matching": { + "spacing / radius / stroke / fontSize": "nearest value in the corresponding Fluent scale (size / corner / stroke / font.size).", + "lineHeight": "flex line-height is relative (%); resolved to the nearest Fluent absolute font.lineHeight using fontSize x percent.", + "fontWeight": "role match (regular/medium/semibold/bold) — flex Segoe weights (420/550/600/625) differ in value from Fluent (400/500/600/700).", + "fontFamily": "role match (base / monospace)." + }, + "notes": [ + "null = no equivalent Fluent global token; fall back to the flex source value in semantic.css.", + "letterSpacing* are null — Fluent global has no letter-spacing/tracking token.", + "fontFamilyContentEditorial is null — Fluent global has no serif family token.", + "Flex has finer/larger steps than Fluent in a few scales (e.g. radius 16/24/28, spacing 96); nearest emits the closest Fluent token — prefer the flex default where an exact step matters." + ] + }, + "map": { + "fontWeightFunctionalRegular": "global.font.weight.regular", + "fontWeightFunctionalMedium": "global.font.weight.medium", + "fontWeightFunctionalSemibold": "global.font.weight.semibold", + "fontWeightFunctionalBold": "global.font.weight.bold", + "fontWeightContentRegular": "global.font.weight.regular", + "fontWeightContentMedium": "global.font.weight.medium", + "fontWeightContentSemibold": "global.font.weight.semibold", + "fontWeightContentBold": "global.font.weight.bold", + "fontWeightContentEditorialRegular": "global.font.weight.regular", + "fontWeightContentEditorialMedium": "global.font.weight.medium", + "fontWeightContentEditorialSemibold": "global.font.weight.semibold", + "fontWeightContentEditorialBold": "global.font.weight.bold", + "fontFamilyFunctional": "global.font.family.base", + "fontFamilyContent": "global.font.family.base", + "fontFamilyContentEditorial": null, + "fontFamilyContentCode": "global.font.family.monospace", + "letterSpacingFunctionalDisplay": null, + "letterSpacingFunctionalPagetitle": null, + "letterSpacingFunctionalTitleLarge": null, + "letterSpacingFunctionalTitleMedium": null, + "letterSpacingFunctionalTitleSmall": null, + "letterSpacingFunctionalSubtitle": null, + "letterSpacingFunctionalBodyLarge": null, + "letterSpacingFunctionalBodyMedium": null, + "letterSpacingFunctionalBodySmall": null, + "letterSpacingFunctionalCaption": null, + "letterSpacingContentStatement": null, + "letterSpacingContentExpressiveLarge": null, + "letterSpacingContentExpressiveMedium": null, + "letterSpacingContentExpressiveSmall": null, + "letterSpacingContentH1": null, + "letterSpacingContentH2": null, + "letterSpacingContentH3": null, + "letterSpacingContentH4": null, + "letterSpacingContentH5": null, + "letterSpacingContentSubheadline": null, + "letterSpacingContentParagraphLarge": null, + "letterSpacingContentParagraphMedium": null, + "letterSpacingContentParagraphSmall": null, + "letterSpacingContentSubtext": null, + "letterSpacingContentTable": null, + "letterSpacingContentCode": null, + "fontSizeFunctionalDisplay": "global.font.size1000", + "fontSizeFunctionalPagetitle": "global.font.size900", + "fontSizeFunctionalTitleLarge": "global.font.size800", + "fontSizeFunctionalTitleMedium": "global.font.size700", + "fontSizeFunctionalTitleSmall": "global.font.size600", + "fontSizeFunctionalSubtitle": "global.font.size500", + "fontSizeFunctionalBodyLarge": "global.font.size400", + "fontSizeFunctionalBodyMedium": "global.font.size300", + "fontSizeFunctionalBodySmall": "global.font.size200", + "fontSizeFunctionalCaption": "global.font.size100", + "fontSizeContentStatement": "global.font.size1000", + "fontSizeContentExpressiveLarge": "global.font.size900", + "fontSizeContentExpressiveMedium": "global.font.size800", + "fontSizeContentExpressiveSmall": "global.font.size700", + "fontSizeContentH1": "global.font.size800", + "fontSizeContentH2": "global.font.size800", + "fontSizeContentH3": "global.font.size700", + "fontSizeContentH4": "global.font.size600", + "fontSizeContentH5": "global.font.size500", + "fontSizeContentSubheadline": "global.font.size400", + "fontSizeContentParagraphLarge": "global.font.size500", + "fontSizeContentParagraphMedium": "global.font.size400", + "fontSizeContentParagraphSmall": "global.font.size200", + "fontSizeContentSubtext": "global.font.size100", + "fontSizeContentTable": "global.font.size400", + "fontSizeContentCode": "global.font.size400", + "lineHeightFunctionalDisplay": "global.font.lineHeight1000", + "lineHeightFunctionalPagetitle": "global.font.lineHeight900", + "lineHeightFunctionalTitleLarge": "global.font.lineHeight800", + "lineHeightFunctionalTitleMedium": "global.font.lineHeight600", + "lineHeightFunctionalTitleSmall": "global.font.lineHeight500", + "lineHeightFunctionalSubtitle": "global.font.lineHeight500", + "lineHeightFunctionalBodyLarge": "global.font.lineHeight400", + "lineHeightFunctionalBodyMedium": "global.font.lineHeight300", + "lineHeightFunctionalBodySmall": "global.font.lineHeight200", + "lineHeightFunctionalCaption": "global.font.lineHeight100", + "lineHeightContentStatement": "global.font.lineHeight900", + "lineHeightContentExpressiveLarge": "global.font.lineHeight900", + "lineHeightContentExpressiveMedium": "global.font.lineHeight800", + "lineHeightContentExpressiveSmall": "global.font.lineHeight600", + "lineHeightContentH1": "global.font.lineHeight800", + "lineHeightContentH2": "global.font.lineHeight800", + "lineHeightContentH3": "global.font.lineHeight600", + "lineHeightContentH4": "global.font.lineHeight500", + "lineHeightContentH5": "global.font.lineHeight400", + "lineHeightContentSubheadline": "global.font.lineHeight400", + "lineHeightContentParagraphLarge": "global.font.lineHeight600", + "lineHeightContentParagraphMedium": "global.font.lineHeight500", + "lineHeightContentParagraphSmall": "global.font.lineHeight300", + "lineHeightContentSubtext": "global.font.lineHeight100", + "lineHeightContentTable": "global.font.lineHeight400", + "lineHeightContentCode": "global.font.lineHeight400", + "borderRadiusBase100": "global.corner.radius40", + "borderRadiusBase200": "global.corner.radius80", + "borderRadiusBase300": "global.corner.radius120", + "borderRadiusBase400": "global.corner.radius120", + "borderRadiusBase600": "global.corner.radius120", + "borderRadiusBase700": "global.corner.radius120", + "borderRadiusCircular": "global.corner.radiusCircular", + "spacingComponentBase50": "global.size20", + "spacingComponentBase100": "global.size40", + "spacingComponentBase150": "global.size60", + "spacingComponentBase200": "global.size80", + "spacingComponentBase250": "global.size100", + "spacingComponentBase300": "global.size120", + "spacingComponentBase400": "global.size160", + "spacingComponentBase500": "global.size200", + "spacingComponentBase600": "global.size240", + "spacingComponentBase700": "global.size280", + "spacingLayoutBase100": "global.size80", + "spacingLayoutBase200": "global.size160", + "spacingLayoutBase300": "global.size240", + "spacingLayoutBase400": "global.size320", + "spacingLayoutBase450": "global.size360", + "spacingLayoutBase500": "global.size400", + "spacingLayoutBase600": "global.size480", + "spacingLayoutBase700": "global.size560", + "spacingLayoutBase800": "global.size640", + "spacingLayoutBase1000": "global.size800", + "spacingLayoutBase1200": "global.size800", + "strokeWidthThin": "global.stroke.width10", + "strokeWidthThick": "global.stroke.width20", + "strokeWidthThicker": "global.stroke.width30", + "strokeWidthThickest": "global.stroke.width40" + } +} diff --git a/packages/agentic-design/src/tokens/mappings/gnrc-token-map.json b/packages/agentic-design/src/tokens/mappings/gnrc-token-map.json new file mode 100644 index 0000000000..f80e2f61a4 --- /dev/null +++ b/packages/agentic-design/src/tokens/mappings/gnrc-token-map.json @@ -0,0 +1,371 @@ +{ + "--gnrc-color-surface-neutral-farther-hover": "hover.colorSurfaceNeutralFarther", + "--gnrc-color-surface-neutral-farther-pressed": "pressed.colorSurfaceNeutralFarther", + "--gnrc-color-surface-neutral-far-hover": "hover.colorSurfaceNeutralFar", + "--gnrc-color-surface-neutral-far-pressed": "pressed.colorSurfaceNeutralFar", + "--gnrc-color-surface-neutral-near-hover": "hover.colorSurfaceNeutralNear", + "--gnrc-color-surface-neutral-near-pressed": "pressed.colorSurfaceNeutralNear", + "--gnrc-color-surface-neutral-nearer-hover": "hover.colorSurfaceNeutralNearer", + "--gnrc-color-surface-neutral-nearer-pressed": "pressed.colorSurfaceNeutralNearer", + "--gnrc-color-surface-neutral-translucent-hover": "hover.colorSurfaceNeutralTranslucent", + "--gnrc-color-surface-neutral-translucent-pressed": "pressed.colorSurfaceNeutralTranslucent", + "--gnrc-color-background-neutral-heavy-hover": "hover.colorBackgroundNeutralHeavy", + "--gnrc-color-background-neutral-heavy-pressed": "pressed.colorBackgroundNeutralHeavy", + "--gnrc-color-background-neutral-loud-hover": "hover.colorBackgroundNeutralLoud", + "--gnrc-color-background-neutral-loud-pressed": "pressed.colorBackgroundNeutralLoud", + "--gnrc-color-background-neutral-soft-hover": "hover.colorBackgroundNeutralSoft", + "--gnrc-color-background-neutral-soft-pressed": "pressed.colorBackgroundNeutralSoft", + "--gnrc-color-background-neutral-subtle-hover": "hover.colorBackgroundNeutralSubtle", + "--gnrc-color-background-neutral-subtle-pressed": "pressed.colorBackgroundNeutralSubtle", + "--gnrc-color-background-neutral-transparent-hover": "hover.colorBackgroundNeutralTransparent", + "--gnrc-color-background-neutral-transparent-pressed": "pressed.colorBackgroundNeutralTransparent", + "--gnrc-color-background-neutral-translucent-hover": "hover.colorBackgroundNeutralTranslucent", + "--gnrc-color-background-neutral-translucent-pressed": "pressed.colorBackgroundNeutralTranslucent", + "--gnrc-color-background-brand-heavy-hover": "hover.colorBackgroundBrandHeavy", + "--gnrc-color-background-brand-heavy-pressed": "pressed.colorBackgroundBrandHeavy", + "--gnrc-color-background-brand-loud-hover": "hover.colorBackgroundBrandLoud", + "--gnrc-color-background-brand-loud-pressed": "pressed.colorBackgroundBrandLoud", + "--gnrc-color-background-brand-soft-hover": "hover.colorBackgroundBrandSoft", + "--gnrc-color-background-brand-soft-pressed": "pressed.colorBackgroundBrandSoft", + "--gnrc-color-background-brand-subtle-hover": "hover.colorBackgroundBrandSubtle", + "--gnrc-color-background-brand-subtle-pressed": "pressed.colorBackgroundBrandSubtle", + "--gnrc-color-background-brand-transparent-hover": "hover.colorBackgroundBrandTransparent", + "--gnrc-color-background-brand-transparent-pressed": "pressed.colorBackgroundBrandTransparent", + "--gnrc-color-background-danger-loud-hover": "hover.colorBackgroundDangerLoud", + "--gnrc-color-background-danger-loud-pressed": "pressed.colorBackgroundDangerLoud", + "--gnrc-color-background-danger-soft-hover": "hover.colorBackgroundDangerSoft", + "--gnrc-color-background-danger-soft-pressed": "pressed.colorBackgroundDangerSoft", + "--gnrc-color-background-danger-subtle-hover": "hover.colorBackgroundDangerSubtle", + "--gnrc-color-background-danger-subtle-pressed": "pressed.colorBackgroundDangerSubtle", + "--gnrc-color-background-warning-loud-hover": "hover.colorBackgroundWarningLoud", + "--gnrc-color-background-warning-loud-pressed": "pressed.colorBackgroundWarningLoud", + "--gnrc-color-background-warning-soft-hover": "hover.colorBackgroundWarningSoft", + "--gnrc-color-background-warning-soft-pressed": "pressed.colorBackgroundWarningSoft", + "--gnrc-color-background-warning-subtle-hover": "hover.colorBackgroundWarningSubtle", + "--gnrc-color-background-warning-subtle-pressed": "pressed.colorBackgroundWarningSubtle", + "--gnrc-color-background-success-loud-hover": "hover.colorBackgroundSuccessLoud", + "--gnrc-color-background-success-loud-pressed": "pressed.colorBackgroundSuccessLoud", + "--gnrc-color-background-success-soft-hover": "hover.colorBackgroundSuccessSoft", + "--gnrc-color-background-success-soft-pressed": "pressed.colorBackgroundSuccessSoft", + "--gnrc-color-background-success-subtle-hover": "hover.colorBackgroundSuccessSubtle", + "--gnrc-color-background-success-subtle-pressed": "pressed.colorBackgroundSuccessSubtle", + "--gnrc-color-stroke-neutral-heavy-hover": "hover.colorStrokeNeutralHeavy", + "--gnrc-color-stroke-neutral-heavy-pressed": "pressed.colorStrokeNeutralHeavy", + "--gnrc-color-stroke-neutral-loud-hover": "hover.colorStrokeNeutralLoud", + "--gnrc-color-stroke-neutral-loud-pressed": "pressed.colorStrokeNeutralLoud", + "--gnrc-color-stroke-neutral-soft-hover": "hover.colorStrokeNeutralSoft", + "--gnrc-color-stroke-neutral-soft-pressed": "pressed.colorStrokeNeutralSoft", + "--gnrc-color-stroke-neutral-subtle-hover": "hover.colorStrokeNeutralSubtle", + "--gnrc-color-stroke-neutral-subtle-pressed": "pressed.colorStrokeNeutralSubtle", + "--gnrc-color-stroke-neutral-transparent-hover": "hover.colorStrokeNeutralTransparent", + "--gnrc-color-stroke-neutral-transparent-pressed": "pressed.colorStrokeNeutralTransparent", + "--gnrc-color-stroke-neutral-onloud-hover": "hover.colorStrokeNeutralOnloud", + "--gnrc-color-stroke-neutral-onloud-pressed": "pressed.colorStrokeNeutralOnloud", + "--gnrc-color-stroke-brand-loud-hover": "hover.colorStrokeBrandLoud", + "--gnrc-color-stroke-brand-loud-pressed": "pressed.colorStrokeBrandLoud", + "--gnrc-color-stroke-brand-soft-hover": "hover.colorStrokeBrandSoft", + "--gnrc-color-stroke-brand-soft-pressed": "pressed.colorStrokeBrandSoft", + "--gnrc-color-stroke-brand-subtle-hover": "hover.colorStrokeBrandSubtle", + "--gnrc-color-stroke-brand-subtle-pressed": "pressed.colorStrokeBrandSubtle", + "--gnrc-color-stroke-brand-onloud-hover": "hover.colorStrokeBrandOnloud", + "--gnrc-color-stroke-brand-onloud-pressed": "pressed.colorStrokeBrandOnloud", + "--gnrc-color-stroke-danger-loud-hover": "hover.colorStrokeDangerLoud", + "--gnrc-color-stroke-danger-loud-pressed": "pressed.colorStrokeDangerLoud", + "--gnrc-color-stroke-danger-soft-hover": "hover.colorStrokeDangerSoft", + "--gnrc-color-stroke-danger-soft-pressed": "pressed.colorStrokeDangerSoft", + "--gnrc-color-stroke-danger-subtle-hover": "hover.colorStrokeDangerSubtle", + "--gnrc-color-stroke-danger-subtle-pressed": "pressed.colorStrokeDangerSubtle", + "--gnrc-color-stroke-danger-onloud-hover": "hover.colorStrokeDangerOnloud", + "--gnrc-color-stroke-danger-onloud-pressed": "pressed.colorStrokeDangerOnloud", + "--gnrc-color-stroke-warning-loud-hover": "hover.colorStrokeWarningLoud", + "--gnrc-color-stroke-warning-loud-pressed": "pressed.colorStrokeWarningLoud", + "--gnrc-color-stroke-warning-soft-hover": "hover.colorStrokeWarningSoft", + "--gnrc-color-stroke-warning-soft-pressed": "pressed.colorStrokeWarningSoft", + "--gnrc-color-stroke-warning-subtle-hover": "hover.colorStrokeWarningSubtle", + "--gnrc-color-stroke-warning-subtle-pressed": "pressed.colorStrokeWarningSubtle", + "--gnrc-color-stroke-warning-onloud-hover": "hover.colorStrokeWarningOnloud", + "--gnrc-color-stroke-warning-onloud-pressed": "pressed.colorStrokeWarningOnloud", + "--gnrc-color-stroke-success-loud-hover": "hover.colorStrokeSuccessLoud", + "--gnrc-color-stroke-success-loud-pressed": "pressed.colorStrokeSuccessLoud", + "--gnrc-color-stroke-success-soft-hover": "hover.colorStrokeSuccessSoft", + "--gnrc-color-stroke-success-soft-pressed": "pressed.colorStrokeSuccessSoft", + "--gnrc-color-stroke-success-subtle-hover": "hover.colorStrokeSuccessSubtle", + "--gnrc-color-stroke-success-subtle-pressed": "pressed.colorStrokeSuccessSubtle", + "--gnrc-color-stroke-success-onloud-hover": "hover.colorStrokeSuccessOnloud", + "--gnrc-color-stroke-success-onloud-pressed": "pressed.colorStrokeSuccessOnloud", + "--gnrc-color-foreground-neutral-primary-hover": "hover.colorForegroundNeutralPrimary", + "--gnrc-color-foreground-neutral-primary-pressed": "pressed.colorForegroundNeutralPrimary", + "--gnrc-color-foreground-neutral-secondary-hover": "hover.colorForegroundNeutralSecondary", + "--gnrc-color-foreground-neutral-secondary-pressed": "pressed.colorForegroundNeutralSecondary", + "--gnrc-color-foreground-neutral-tertiary-hover": "hover.colorForegroundNeutralTertiary", + "--gnrc-color-foreground-neutral-tertiary-pressed": "pressed.colorForegroundNeutralTertiary", + "--gnrc-color-foreground-neutral-onloud-hover": "hover.colorForegroundNeutralOnloud", + "--gnrc-color-foreground-neutral-onloud-pressed": "pressed.colorForegroundNeutralOnloud", + "--gnrc-color-foreground-brand-primary-hover": "hover.colorForegroundBrandPrimary", + "--gnrc-color-foreground-brand-primary-pressed": "pressed.colorForegroundBrandPrimary", + "--gnrc-color-foreground-brand-onloud-hover": "hover.colorForegroundBrandOnloud", + "--gnrc-color-foreground-brand-onloud-pressed": "pressed.colorForegroundBrandOnloud", + "--gnrc-color-foreground-danger-primary-hover": "hover.colorForegroundDangerPrimary", + "--gnrc-color-foreground-danger-primary-pressed": "pressed.colorForegroundDangerPrimary", + "--gnrc-color-foreground-danger-onloud-hover": "hover.colorForegroundDangerOnloud", + "--gnrc-color-foreground-danger-onloud-pressed": "pressed.colorForegroundDangerOnloud", + "--gnrc-color-foreground-warning-primary-hover": "hover.colorForegroundWarningPrimary", + "--gnrc-color-foreground-warning-primary-pressed": "pressed.colorForegroundWarningPrimary", + "--gnrc-color-foreground-warning-onloud-hover": "hover.colorForegroundWarningOnloud", + "--gnrc-color-foreground-warning-onloud-pressed": "pressed.colorForegroundWarningOnloud", + "--gnrc-color-foreground-success-primary-hover": "hover.colorForegroundSuccessPrimary", + "--gnrc-color-foreground-success-primary-pressed": "pressed.colorForegroundSuccessPrimary", + "--gnrc-color-foreground-success-onloud-hover": "hover.colorForegroundSuccessOnloud", + "--gnrc-color-foreground-success-onloud-pressed": "pressed.colorForegroundSuccessOnloud", + "--gnrc-color-surface-neutral-farther": "colorSurfaceNeutralFarther", + "--gnrc-color-surface-neutral-far": "colorSurfaceNeutralFar", + "--gnrc-color-surface-neutral-near": "colorSurfaceNeutralNear", + "--gnrc-color-surface-neutral-nearer": "colorSurfaceNeutralNearer", + "--gnrc-color-surface-neutral-translucent": "colorSurfaceNeutralTranslucent", + "--gnrc-color-background-neutral-heavy": "colorBackgroundNeutralHeavy", + "--gnrc-color-background-neutral-loud": "colorBackgroundNeutralLoud", + "--gnrc-color-background-neutral-soft": "colorBackgroundNeutralSoft", + "--gnrc-color-background-neutral-subtle": "colorBackgroundNeutralSubtle", + "--gnrc-color-background-neutral-transparent": "colorBackgroundNeutralTransparent", + "--gnrc-color-background-neutral-translucent": "colorBackgroundNeutralTranslucent", + "--gnrc-color-background-brand-heavy": "colorBackgroundBrandHeavy", + "--gnrc-color-background-brand-loud": "colorBackgroundBrandLoud", + "--gnrc-color-background-brand-soft": "colorBackgroundBrandSoft", + "--gnrc-color-background-brand-subtle": "colorBackgroundBrandSubtle", + "--gnrc-color-background-brand-transparent": "colorBackgroundBrandTransparent", + "--gnrc-color-background-danger-loud": "colorBackgroundDangerLoud", + "--gnrc-color-background-danger-soft": "colorBackgroundDangerSoft", + "--gnrc-color-background-danger-subtle": "colorBackgroundDangerSubtle", + "--gnrc-color-background-warning-loud": "colorBackgroundWarningLoud", + "--gnrc-color-background-warning-soft": "colorBackgroundWarningSoft", + "--gnrc-color-background-warning-subtle": "colorBackgroundWarningSubtle", + "--gnrc-color-background-success-loud": "colorBackgroundSuccessLoud", + "--gnrc-color-background-success-soft": "colorBackgroundSuccessSoft", + "--gnrc-color-background-success-subtle": "colorBackgroundSuccessSubtle", + "--gnrc-color-stroke-neutral-heavy": "colorStrokeNeutralHeavy", + "--gnrc-color-stroke-neutral-loud": "colorStrokeNeutralLoud", + "--gnrc-color-stroke-neutral-soft": "colorStrokeNeutralSoft", + "--gnrc-color-stroke-neutral-subtle": "colorStrokeNeutralSubtle", + "--gnrc-color-stroke-neutral-transparent": "colorStrokeNeutralTransparent", + "--gnrc-color-stroke-neutral-onloud": "colorStrokeNeutralOnloud", + "--gnrc-color-stroke-brand-loud": "colorStrokeBrandLoud", + "--gnrc-color-stroke-brand-soft": "colorStrokeBrandSoft", + "--gnrc-color-stroke-brand-subtle": "colorStrokeBrandSubtle", + "--gnrc-color-stroke-brand-onloud": "colorStrokeBrandOnloud", + "--gnrc-color-stroke-danger-loud": "colorStrokeDangerLoud", + "--gnrc-color-stroke-danger-soft": "colorStrokeDangerSoft", + "--gnrc-color-stroke-danger-subtle": "colorStrokeDangerSubtle", + "--gnrc-color-stroke-danger-onloud": "colorStrokeDangerOnloud", + "--gnrc-color-stroke-warning-loud": "colorStrokeWarningLoud", + "--gnrc-color-stroke-warning-soft": "colorStrokeWarningSoft", + "--gnrc-color-stroke-warning-subtle": "colorStrokeWarningSubtle", + "--gnrc-color-stroke-warning-onloud": "colorStrokeWarningOnloud", + "--gnrc-color-stroke-success-loud": "colorStrokeSuccessLoud", + "--gnrc-color-stroke-success-soft": "colorStrokeSuccessSoft", + "--gnrc-color-stroke-success-subtle": "colorStrokeSuccessSubtle", + "--gnrc-color-stroke-success-onloud": "colorStrokeSuccessOnloud", + "--gnrc-color-foreground-neutral-primary": "colorForegroundNeutralPrimary", + "--gnrc-color-foreground-neutral-secondary": "colorForegroundNeutralSecondary", + "--gnrc-color-foreground-neutral-tertiary": "colorForegroundNeutralTertiary", + "--gnrc-color-foreground-neutral-onloud": "colorForegroundNeutralOnloud", + "--gnrc-color-foreground-brand-primary": "colorForegroundBrandPrimary", + "--gnrc-color-foreground-brand-onloud": "colorForegroundBrandOnloud", + "--gnrc-color-foreground-danger-primary": "colorForegroundDangerPrimary", + "--gnrc-color-foreground-danger-onloud": "colorForegroundDangerOnloud", + "--gnrc-color-foreground-warning-primary": "colorForegroundWarningPrimary", + "--gnrc-color-foreground-warning-onloud": "colorForegroundWarningOnloud", + "--gnrc-color-foreground-success-primary": "colorForegroundSuccessPrimary", + "--gnrc-color-foreground-success-onloud": "colorForegroundSuccessOnloud", + "--gnrc-color-fixed-white": "colorFixedWhite", + "--gnrc-color-fixed-black": "colorFixedBlack", + "--gnrc-color-expression-accent-heavy": "colorExpressionAccentHeavy", + "--gnrc-color-expression-accent-loud": "colorExpressionAccentLoud", + "--gnrc-color-expression-accent-soft": "colorExpressionAccentSoft", + "--gnrc-color-expression-accent-subtle": "colorExpressionAccentSubtle", + "--gnrc-color-expression-achromatic-heavy": "colorExpressionAchromaticHeavy", + "--gnrc-color-expression-achromatic-subtle": "colorExpressionAchromaticSubtle", + "--gnrc-color-expression-gray-heavy": "colorExpressionGrayHeavy", + "--gnrc-color-expression-gray-loud": "colorExpressionGrayLoud", + "--gnrc-color-expression-gray-soft": "colorExpressionGraySoft", + "--gnrc-color-expression-gray-subtle": "colorExpressionGraySubtle", + "--gnrc-color-expression-navy-heavy": "colorExpressionNavyHeavy", + "--gnrc-color-expression-navy-loud": "colorExpressionNavyLoud", + "--gnrc-color-expression-navy-soft": "colorExpressionNavySoft", + "--gnrc-color-expression-navy-subtle": "colorExpressionNavySubtle", + "--gnrc-color-expression-blue-heavy": "colorExpressionBlueHeavy", + "--gnrc-color-expression-blue-loud": "colorExpressionBlueLoud", + "--gnrc-color-expression-blue-soft": "colorExpressionBlueSoft", + "--gnrc-color-expression-blue-subtle": "colorExpressionBlueSubtle", + "--gnrc-color-expression-green-heavy": "colorExpressionGreenHeavy", + "--gnrc-color-expression-green-loud": "colorExpressionGreenLoud", + "--gnrc-color-expression-green-soft": "colorExpressionGreenSoft", + "--gnrc-color-expression-green-subtle": "colorExpressionGreenSubtle", + "--gnrc-color-expression-lime-heavy": "colorExpressionLimeHeavy", + "--gnrc-color-expression-lime-loud": "colorExpressionLimeLoud", + "--gnrc-color-expression-lime-soft": "colorExpressionLimeSoft", + "--gnrc-color-expression-lime-subtle": "colorExpressionLimeSubtle", + "--gnrc-color-expression-yellow-heavy": "colorExpressionYellowHeavy", + "--gnrc-color-expression-yellow-loud": "colorExpressionYellowLoud", + "--gnrc-color-expression-yellow-soft": "colorExpressionYellowSoft", + "--gnrc-color-expression-yellow-subtle": "colorExpressionYellowSubtle", + "--gnrc-color-expression-pumpkin-heavy": "colorExpressionPumpkinHeavy", + "--gnrc-color-expression-pumpkin-loud": "colorExpressionPumpkinLoud", + "--gnrc-color-expression-pumpkin-soft": "colorExpressionPumpkinSoft", + "--gnrc-color-expression-pumpkin-subtle": "colorExpressionPumpkinSubtle", + "--gnrc-color-expression-red-heavy": "colorExpressionRedHeavy", + "--gnrc-color-expression-red-loud": "colorExpressionRedLoud", + "--gnrc-color-expression-red-soft": "colorExpressionRedSoft", + "--gnrc-color-expression-red-subtle": "colorExpressionRedSubtle", + "--gnrc-color-expression-pink-heavy": "colorExpressionPinkHeavy", + "--gnrc-color-expression-pink-loud": "colorExpressionPinkLoud", + "--gnrc-color-expression-pink-soft": "colorExpressionPinkSoft", + "--gnrc-color-expression-pink-subtle": "colorExpressionPinkSubtle", + "--gnrc-color-expression-purple-heavy": "colorExpressionPurpleHeavy", + "--gnrc-color-expression-purple-loud": "colorExpressionPurpleLoud", + "--gnrc-color-expression-purple-soft": "colorExpressionPurpleSoft", + "--gnrc-color-expression-purple-subtle": "colorExpressionPurpleSubtle", + "--gnrc-color-overlay-neutral-translucent": "colorOverlayNeutralTranslucent", + "--gnrc-material-background-thick": "colorMaterialBackgroundThick", + "--gnrc-material-background-regular": "colorMaterialBackgroundRegular", + "--gnrc-material-background-thin": "colorMaterialBackgroundThin", + "--gnrc-color-background-neutral-disabled": "colorBackgroundNeutralDisabled", + "--gnrc-color-background-neutral-heavy-disabled": "colorBackgroundNeutralHeavyDisabled", + "--gnrc-color-background-neutral-subtle-disabled": "colorBackgroundNeutralSubtleDisabled", + "--gnrc-color-stroke-neutral-disabled": "colorStrokeNeutralDisabled", + "--gnrc-color-stroke-focus-inner": "colorStrokeFocusInner", + "--gnrc-color-stroke-focus-outer": "colorStrokeFocusOuter", + "--gnrc-color-foreground-neutral-disabled": "colorForegroundNeutralDisabled", + "--gnrc-color-shadow": "colorShadow", + "--gnrc-shadow-lowest": "shadowLowest", + "--gnrc-shadow-lower": "shadowLower", + "--gnrc-shadow-low": "shadowLow", + "--gnrc-shadow-high": "shadowHigh", + "--gnrc-shadow-higher": "shadowHigher", + "--gnrc-shadow-highest": "shadowHighest", + "--gnrc-font-weight-functional-regular": "fontWeightFunctionalRegular", + "--gnrc-font-weight-functional-medium": "fontWeightFunctionalMedium", + "--gnrc-font-weight-functional-semibold": "fontWeightFunctionalSemibold", + "--gnrc-font-weight-functional-bold": "fontWeightFunctionalBold", + "--gnrc-font-weight-content-regular": "fontWeightContentRegular", + "--gnrc-font-weight-content-medium": "fontWeightContentMedium", + "--gnrc-font-weight-content-semibold": "fontWeightContentSemibold", + "--gnrc-font-weight-content-bold": "fontWeightContentBold", + "--gnrc-font-weight-content-editorial-regular": "fontWeightContentEditorialRegular", + "--gnrc-font-weight-content-editorial-medium": "fontWeightContentEditorialMedium", + "--gnrc-font-weight-content-editorial-semibold": "fontWeightContentEditorialSemibold", + "--gnrc-font-weight-content-editorial-bold": "fontWeightContentEditorialBold", + "--gnrc-font-family-functional": "fontFamilyFunctional", + "--gnrc-font-family-content": "fontFamilyContent", + "--gnrc-font-family-content-editorial": "fontFamilyContentEditorial", + "--gnrc-font-family-content-code": "fontFamilyContentCode", + "--gnrc-letter-spacing-functional-display": "letterSpacingFunctionalDisplay", + "--gnrc-letter-spacing-functional-pagetitle": "letterSpacingFunctionalPagetitle", + "--gnrc-letter-spacing-functional-title-large": "letterSpacingFunctionalTitleLarge", + "--gnrc-letter-spacing-functional-title-medium": "letterSpacingFunctionalTitleMedium", + "--gnrc-letter-spacing-functional-title-small": "letterSpacingFunctionalTitleSmall", + "--gnrc-letter-spacing-functional-subtitle": "letterSpacingFunctionalSubtitle", + "--gnrc-letter-spacing-functional-body-large": "letterSpacingFunctionalBodyLarge", + "--gnrc-letter-spacing-functional-body-medium": "letterSpacingFunctionalBodyMedium", + "--gnrc-letter-spacing-functional-body-small": "letterSpacingFunctionalBodySmall", + "--gnrc-letter-spacing-functional-caption": "letterSpacingFunctionalCaption", + "--gnrc-letter-spacing-content-statement": "letterSpacingContentStatement", + "--gnrc-letter-spacing-content-expressive-large": "letterSpacingContentExpressiveLarge", + "--gnrc-letter-spacing-content-expressive-medium": "letterSpacingContentExpressiveMedium", + "--gnrc-letter-spacing-content-expressive-small": "letterSpacingContentExpressiveSmall", + "--gnrc-letter-spacing-content-h1": "letterSpacingContentH1", + "--gnrc-letter-spacing-content-h2": "letterSpacingContentH2", + "--gnrc-letter-spacing-content-h3": "letterSpacingContentH3", + "--gnrc-letter-spacing-content-h4": "letterSpacingContentH4", + "--gnrc-letter-spacing-content-h5": "letterSpacingContentH5", + "--gnrc-letter-spacing-content-subheadline": "letterSpacingContentSubheadline", + "--gnrc-letter-spacing-content-paragraph-large": "letterSpacingContentParagraphLarge", + "--gnrc-letter-spacing-content-paragraph-medium": "letterSpacingContentParagraphMedium", + "--gnrc-letter-spacing-content-paragraph-small": "letterSpacingContentParagraphSmall", + "--gnrc-letter-spacing-content-subtext": "letterSpacingContentSubtext", + "--gnrc-letter-spacing-content-table": "letterSpacingContentTable", + "--gnrc-letter-spacing-content-code": "letterSpacingContentCode", + "--gnrc-font-size-functional-display": "fontSizeFunctionalDisplay", + "--gnrc-font-size-functional-pagetitle": "fontSizeFunctionalPagetitle", + "--gnrc-font-size-functional-title-large": "fontSizeFunctionalTitleLarge", + "--gnrc-font-size-functional-title-medium": "fontSizeFunctionalTitleMedium", + "--gnrc-font-size-functional-title-small": "fontSizeFunctionalTitleSmall", + "--gnrc-font-size-functional-subtitle": "fontSizeFunctionalSubtitle", + "--gnrc-font-size-functional-body-large": "fontSizeFunctionalBodyLarge", + "--gnrc-font-size-functional-body-medium": "fontSizeFunctionalBodyMedium", + "--gnrc-font-size-functional-body-small": "fontSizeFunctionalBodySmall", + "--gnrc-font-size-functional-caption": "fontSizeFunctionalCaption", + "--gnrc-font-size-content-statement": "fontSizeContentStatement", + "--gnrc-font-size-content-expressive-large": "fontSizeContentExpressiveLarge", + "--gnrc-font-size-content-expressive-medium": "fontSizeContentExpressiveMedium", + "--gnrc-font-size-content-expressive-small": "fontSizeContentExpressiveSmall", + "--gnrc-font-size-content-h1": "fontSizeContentH1", + "--gnrc-font-size-content-h2": "fontSizeContentH2", + "--gnrc-font-size-content-h3": "fontSizeContentH3", + "--gnrc-font-size-content-h4": "fontSizeContentH4", + "--gnrc-font-size-content-h5": "fontSizeContentH5", + "--gnrc-font-size-content-subheadline": "fontSizeContentSubheadline", + "--gnrc-font-size-content-paragraph-large": "fontSizeContentParagraphLarge", + "--gnrc-font-size-content-paragraph-medium": "fontSizeContentParagraphMedium", + "--gnrc-font-size-content-paragraph-small": "fontSizeContentParagraphSmall", + "--gnrc-font-size-content-subtext": "fontSizeContentSubtext", + "--gnrc-font-size-content-table": "fontSizeContentTable", + "--gnrc-font-size-content-code": "fontSizeContentCode", + "--gnrc-line-height-functional-display": "lineHeightFunctionalDisplay", + "--gnrc-line-height-functional-pagetitle": "lineHeightFunctionalPagetitle", + "--gnrc-line-height-functional-title-large": "lineHeightFunctionalTitleLarge", + "--gnrc-line-height-functional-title-medium": "lineHeightFunctionalTitleMedium", + "--gnrc-line-height-functional-title-small": "lineHeightFunctionalTitleSmall", + "--gnrc-line-height-functional-subtitle": "lineHeightFunctionalSubtitle", + "--gnrc-line-height-functional-body-large": "lineHeightFunctionalBodyLarge", + "--gnrc-line-height-functional-body-medium": "lineHeightFunctionalBodyMedium", + "--gnrc-line-height-functional-body-small": "lineHeightFunctionalBodySmall", + "--gnrc-line-height-functional-caption": "lineHeightFunctionalCaption", + "--gnrc-line-height-content-statement": "lineHeightContentStatement", + "--gnrc-line-height-content-expressive-large": "lineHeightContentExpressiveLarge", + "--gnrc-line-height-content-expressive-medium": "lineHeightContentExpressiveMedium", + "--gnrc-line-height-content-expressive-small": "lineHeightContentExpressiveSmall", + "--gnrc-line-height-content-h1": "lineHeightContentH1", + "--gnrc-line-height-content-h2": "lineHeightContentH2", + "--gnrc-line-height-content-h3": "lineHeightContentH3", + "--gnrc-line-height-content-h4": "lineHeightContentH4", + "--gnrc-line-height-content-h5": "lineHeightContentH5", + "--gnrc-line-height-content-subheadline": "lineHeightContentSubheadline", + "--gnrc-line-height-content-paragraph-large": "lineHeightContentParagraphLarge", + "--gnrc-line-height-content-paragraph-medium": "lineHeightContentParagraphMedium", + "--gnrc-line-height-content-paragraph-small": "lineHeightContentParagraphSmall", + "--gnrc-line-height-content-subtext": "lineHeightContentSubtext", + "--gnrc-line-height-content-table": "lineHeightContentTable", + "--gnrc-line-height-content-code": "lineHeightContentCode", + "--gnrc-border-radius-base-100": "borderRadiusBase100", + "--gnrc-border-radius-base-200": "borderRadiusBase200", + "--gnrc-border-radius-base-300": "borderRadiusBase300", + "--gnrc-border-radius-base-400": "borderRadiusBase400", + "--gnrc-border-radius-base-600": "borderRadiusBase600", + "--gnrc-border-radius-base-700": "borderRadiusBase700", + "--gnrc-border-radius-circular": "borderRadiusCircular", + "--gnrc-spacing-component-base-50": "spacingComponentBase50", + "--gnrc-spacing-component-base-100": "spacingComponentBase100", + "--gnrc-spacing-component-base-150": "spacingComponentBase150", + "--gnrc-spacing-component-base-200": "spacingComponentBase200", + "--gnrc-spacing-component-base-250": "spacingComponentBase250", + "--gnrc-spacing-component-base-300": "spacingComponentBase300", + "--gnrc-spacing-component-base-400": "spacingComponentBase400", + "--gnrc-spacing-component-base-500": "spacingComponentBase500", + "--gnrc-spacing-component-base-600": "spacingComponentBase600", + "--gnrc-spacing-component-base-700": "spacingComponentBase700", + "--gnrc-spacing-layout-base-100": "spacingLayoutBase100", + "--gnrc-spacing-layout-base-200": "spacingLayoutBase200", + "--gnrc-spacing-layout-base-300": "spacingLayoutBase300", + "--gnrc-spacing-layout-base-400": "spacingLayoutBase400", + "--gnrc-spacing-layout-base-450": "spacingLayoutBase450", + "--gnrc-spacing-layout-base-500": "spacingLayoutBase500", + "--gnrc-spacing-layout-base-600": "spacingLayoutBase600", + "--gnrc-spacing-layout-base-700": "spacingLayoutBase700", + "--gnrc-spacing-layout-base-800": "spacingLayoutBase800", + "--gnrc-spacing-layout-base-1000": "spacingLayoutBase1000", + "--gnrc-spacing-layout-base-1200": "spacingLayoutBase1200", + "--gnrc-stroke-width-thin": "strokeWidthThin", + "--gnrc-stroke-width-thick": "strokeWidthThick", + "--gnrc-stroke-width-thicker": "strokeWidthThicker", + "--gnrc-stroke-width-thickest": "strokeWidthThickest" +}