From 5ff5b91ad175957426b13986f136eb54ae2a2167 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Mon, 13 Jul 2026 16:41:55 -0700 Subject: [PATCH 1/3] add flex token stubs generated from design repos --- .../agentic-design/src/tokens/flex.types.ts | 435 ++++++++++++++++++ .../src/tokens/mappings/fluent-token-map.json | 145 ++++++ .../mappings/fluent-token-map.noncolor.json | 150 ++++++ .../src/tokens/mappings/gnrc-token-map.json | 371 +++++++++++++++ 4 files changed, 1101 insertions(+) create mode 100644 packages/agentic-design/src/tokens/flex.types.ts create mode 100644 packages/agentic-design/src/tokens/mappings/fluent-token-map.json create mode 100644 packages/agentic-design/src/tokens/mappings/fluent-token-map.noncolor.json create mode 100644 packages/agentic-design/src/tokens/mappings/gnrc-token-map.json 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..b6b3a4c010 --- /dev/null +++ b/packages/agentic-design/src/tokens/flex.types.ts @@ -0,0 +1,435 @@ +/** + * 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: string; + colorSurfaceNeutralFar: string; + colorSurfaceNeutralNear: string; + colorSurfaceNeutralNearer: string; + colorSurfaceNeutralTranslucent: string; + + // background / neutral + colorBackgroundNeutralHeavy: string; + colorBackgroundNeutralLoud: string; + colorBackgroundNeutralSoft: string; + colorBackgroundNeutralSubtle: string; + colorBackgroundNeutralTransparent: string; + colorBackgroundNeutralTranslucent: string; + + // background / brand + colorBackgroundBrandHeavy: string; + colorBackgroundBrandLoud: string; + colorBackgroundBrandSoft: string; + colorBackgroundBrandSubtle: string; + colorBackgroundBrandTransparent: string; + + // background / danger + colorBackgroundDangerLoud: string; + colorBackgroundDangerSoft: string; + colorBackgroundDangerSubtle: string; + + // background / warning + colorBackgroundWarningLoud: string; + colorBackgroundWarningSoft: string; + colorBackgroundWarningSubtle: string; + + // background / success + colorBackgroundSuccessLoud: string; + colorBackgroundSuccessSoft: string; + colorBackgroundSuccessSubtle: string; + + // stroke / neutral + colorStrokeNeutralHeavy: string; + colorStrokeNeutralLoud: string; + colorStrokeNeutralSoft: string; + colorStrokeNeutralSubtle: string; + colorStrokeNeutralTransparent: string; + colorStrokeNeutralOnloud: string; + + // stroke / brand + colorStrokeBrandLoud: string; + colorStrokeBrandSoft: string; + colorStrokeBrandSubtle: string; + colorStrokeBrandOnloud: string; + + // stroke / danger + colorStrokeDangerLoud: string; + colorStrokeDangerSoft: string; + colorStrokeDangerSubtle: string; + colorStrokeDangerOnloud: string; + + // stroke / warning + colorStrokeWarningLoud: string; + colorStrokeWarningSoft: string; + colorStrokeWarningSubtle: string; + colorStrokeWarningOnloud: string; + + // stroke / success + colorStrokeSuccessLoud: string; + colorStrokeSuccessSoft: string; + colorStrokeSuccessSubtle: string; + colorStrokeSuccessOnloud: string; + + // foreground / neutral + colorForegroundNeutralPrimary: string; + colorForegroundNeutralSecondary: string; + colorForegroundNeutralTertiary: string; + colorForegroundNeutralOnloud: string; + + // foreground / brand + colorForegroundBrandPrimary: string; + colorForegroundBrandOnloud: string; + + // foreground / danger + colorForegroundDangerPrimary: string; + colorForegroundDangerOnloud: string; + + // foreground / warning + colorForegroundWarningPrimary: string; + colorForegroundWarningOnloud: string; + + // foreground / success + colorForegroundSuccessPrimary: string; + colorForegroundSuccessOnloud: string; + + // fixed + colorFixedWhite: string; + colorFixedBlack: string; + + // expression / accent + colorExpressionAccentHeavy: string; + colorExpressionAccentLoud: string; + colorExpressionAccentSoft: string; + colorExpressionAccentSubtle: string; + + // expression / achromatic + colorExpressionAchromaticHeavy: string; + colorExpressionAchromaticSubtle: string; + + // expression / gray + colorExpressionGrayHeavy: string; + colorExpressionGrayLoud: string; + colorExpressionGraySoft: string; + colorExpressionGraySubtle: string; + + // expression / navy + colorExpressionNavyHeavy: string; + colorExpressionNavyLoud: string; + colorExpressionNavySoft: string; + colorExpressionNavySubtle: string; + + // expression / blue + colorExpressionBlueHeavy: string; + colorExpressionBlueLoud: string; + colorExpressionBlueSoft: string; + colorExpressionBlueSubtle: string; + + // expression / green + colorExpressionGreenHeavy: string; + colorExpressionGreenLoud: string; + colorExpressionGreenSoft: string; + colorExpressionGreenSubtle: string; + + // expression / lime + colorExpressionLimeHeavy: string; + colorExpressionLimeLoud: string; + colorExpressionLimeSoft: string; + colorExpressionLimeSubtle: string; + + // expression / yellow + colorExpressionYellowHeavy: string; + colorExpressionYellowLoud: string; + colorExpressionYellowSoft: string; + colorExpressionYellowSubtle: string; + + // expression / pumpkin + colorExpressionPumpkinHeavy: string; + colorExpressionPumpkinLoud: string; + colorExpressionPumpkinSoft: string; + colorExpressionPumpkinSubtle: string; + + // expression / red + colorExpressionRedHeavy: string; + colorExpressionRedLoud: string; + colorExpressionRedSoft: string; + colorExpressionRedSubtle: string; + + // expression / pink + colorExpressionPinkHeavy: string; + colorExpressionPinkLoud: string; + colorExpressionPinkSoft: string; + colorExpressionPinkSubtle: string; + + // expression / purple + colorExpressionPurpleHeavy: string; + colorExpressionPurpleLoud: string; + colorExpressionPurpleSoft: string; + colorExpressionPurpleSubtle: string; + + // overlay + colorOverlayNeutralTranslucent: string; + + // material / background + colorMaterialBackgroundThick: string; + colorMaterialBackgroundRegular: string; + colorMaterialBackgroundThin: string; + + // disabled + colorBackgroundNeutralDisabled: string; + colorBackgroundNeutralHeavyDisabled: string; + colorBackgroundNeutralSubtleDisabled: string; + colorStrokeNeutralDisabled: string; + colorForegroundNeutralDisabled: string; + + // focus strokes + colorStrokeFocusInner: string; + colorStrokeFocusOuter: string; + + // shadow + colorShadow: string; +}; + +/** + * 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: string; + shadowLower: string; + shadowLow: string; + shadowHigh: string; + shadowHigher: string; + shadowHighest: string; + + // font weight + fontWeightFunctionalRegular: number; + fontWeightFunctionalMedium: number; + fontWeightFunctionalSemibold: number; + fontWeightFunctionalBold: number; + fontWeightContentRegular: number; + fontWeightContentMedium: number; + fontWeightContentSemibold: number; + fontWeightContentBold: number; + fontWeightContentEditorialRegular: number; + fontWeightContentEditorialMedium: number; + fontWeightContentEditorialSemibold: number; + fontWeightContentEditorialBold: number; + + // font family + fontFamilyFunctional: string; + fontFamilyContent: string; + fontFamilyContentEditorial: string; + fontFamilyContentCode: string; + + // 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; + + // font size + fontSizeFunctionalDisplay: string; + fontSizeFunctionalPagetitle: string; + fontSizeFunctionalTitleLarge: string; + fontSizeFunctionalTitleMedium: string; + fontSizeFunctionalTitleSmall: string; + fontSizeFunctionalSubtitle: string; + fontSizeFunctionalBodyLarge: string; + fontSizeFunctionalBodyMedium: string; + fontSizeFunctionalBodySmall: string; + fontSizeFunctionalCaption: string; + fontSizeContentStatement: string; + fontSizeContentExpressiveLarge: string; + fontSizeContentExpressiveMedium: string; + fontSizeContentExpressiveSmall: string; + fontSizeContentH1: string; + fontSizeContentH2: string; + fontSizeContentH3: string; + fontSizeContentH4: string; + fontSizeContentH5: string; + fontSizeContentSubheadline: string; + fontSizeContentParagraphLarge: string; + fontSizeContentParagraphMedium: string; + fontSizeContentParagraphSmall: string; + fontSizeContentSubtext: string; + fontSizeContentTable: string; + fontSizeContentCode: string; + + // line height + lineHeightFunctionalDisplay: string; + lineHeightFunctionalPagetitle: string; + lineHeightFunctionalTitleLarge: string; + lineHeightFunctionalTitleMedium: string; + lineHeightFunctionalTitleSmall: string; + lineHeightFunctionalSubtitle: string; + lineHeightFunctionalBodyLarge: string; + lineHeightFunctionalBodyMedium: string; + lineHeightFunctionalBodySmall: string; + lineHeightFunctionalCaption: string; + lineHeightContentStatement: string; + lineHeightContentExpressiveLarge: string; + lineHeightContentExpressiveMedium: string; + lineHeightContentExpressiveSmall: string; + lineHeightContentH1: string; + lineHeightContentH2: string; + lineHeightContentH3: string; + lineHeightContentH4: string; + lineHeightContentH5: string; + lineHeightContentSubheadline: string; + lineHeightContentParagraphLarge: string; + lineHeightContentParagraphMedium: string; + lineHeightContentParagraphSmall: string; + lineHeightContentSubtext: string; + lineHeightContentTable: string; + lineHeightContentCode: string; + + // border radius + borderRadiusBase100: string; + borderRadiusBase200: string; + borderRadiusBase300: string; + borderRadiusBase400: string; + borderRadiusBase600: string; + borderRadiusBase700: string; + borderRadiusCircular: string; + + // spacing / component + spacingComponentBase50: string; + spacingComponentBase100: string; + spacingComponentBase150: string; + spacingComponentBase200: string; + spacingComponentBase250: string; + spacingComponentBase300: string; + spacingComponentBase400: string; + spacingComponentBase500: string; + spacingComponentBase600: string; + spacingComponentBase700: string; + + // spacing / layout + spacingLayoutBase100: string; + spacingLayoutBase200: string; + spacingLayoutBase300: string; + spacingLayoutBase400: string; + spacingLayoutBase450: string; + spacingLayoutBase500: string; + spacingLayoutBase600: string; + spacingLayoutBase700: string; + spacingLayoutBase800: string; + spacingLayoutBase1000: string; + spacingLayoutBase1200: string; + + // stroke width + strokeWidthThin: string; + strokeWidthThick: string; + strokeWidthThicker: string; + strokeWidthThickest: 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" +} From 71a6baff6a6b1b8ed1a4ae36290c9ea712aa1d60 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Wed, 15 Jul 2026 14:05:14 -0700 Subject: [PATCH 2/3] add changeset --- .changeset/wet-rings-roll.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-rings-roll.md 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 From 1f9083af1a33e2dd64ef27aab6d993fed2912007 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Thu, 16 Jul 2026 10:40:04 -0700 Subject: [PATCH 3/3] switch flex types to use react-native types --- .../agentic-design/src/tokens/flex.types.ts | 481 +++++++++--------- 1 file changed, 247 insertions(+), 234 deletions(-) diff --git a/packages/agentic-design/src/tokens/flex.types.ts b/packages/agentic-design/src/tokens/flex.types.ts index b6b3a4c010..5463dceac9 100644 --- a/packages/agentic-design/src/tokens/flex.types.ts +++ b/packages/agentic-design/src/tokens/flex.types.ts @@ -1,3 +1,11 @@ +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 @@ -7,191 +15,191 @@ */ export type SemanticColorTokenValues = { // surface / neutral - colorSurfaceNeutralFarther: string; - colorSurfaceNeutralFar: string; - colorSurfaceNeutralNear: string; - colorSurfaceNeutralNearer: string; - colorSurfaceNeutralTranslucent: string; + colorSurfaceNeutralFarther: ColorValue; + colorSurfaceNeutralFar: ColorValue; + colorSurfaceNeutralNear: ColorValue; + colorSurfaceNeutralNearer: ColorValue; + colorSurfaceNeutralTranslucent: ColorValue; // background / neutral - colorBackgroundNeutralHeavy: string; - colorBackgroundNeutralLoud: string; - colorBackgroundNeutralSoft: string; - colorBackgroundNeutralSubtle: string; - colorBackgroundNeutralTransparent: string; - colorBackgroundNeutralTranslucent: string; + colorBackgroundNeutralHeavy: ColorValue; + colorBackgroundNeutralLoud: ColorValue; + colorBackgroundNeutralSoft: ColorValue; + colorBackgroundNeutralSubtle: ColorValue; + colorBackgroundNeutralTransparent: ColorValue; + colorBackgroundNeutralTranslucent: ColorValue; // background / brand - colorBackgroundBrandHeavy: string; - colorBackgroundBrandLoud: string; - colorBackgroundBrandSoft: string; - colorBackgroundBrandSubtle: string; - colorBackgroundBrandTransparent: string; + colorBackgroundBrandHeavy: ColorValue; + colorBackgroundBrandLoud: ColorValue; + colorBackgroundBrandSoft: ColorValue; + colorBackgroundBrandSubtle: ColorValue; + colorBackgroundBrandTransparent: ColorValue; // background / danger - colorBackgroundDangerLoud: string; - colorBackgroundDangerSoft: string; - colorBackgroundDangerSubtle: string; + colorBackgroundDangerLoud: ColorValue; + colorBackgroundDangerSoft: ColorValue; + colorBackgroundDangerSubtle: ColorValue; // background / warning - colorBackgroundWarningLoud: string; - colorBackgroundWarningSoft: string; - colorBackgroundWarningSubtle: string; + colorBackgroundWarningLoud: ColorValue; + colorBackgroundWarningSoft: ColorValue; + colorBackgroundWarningSubtle: ColorValue; // background / success - colorBackgroundSuccessLoud: string; - colorBackgroundSuccessSoft: string; - colorBackgroundSuccessSubtle: string; + colorBackgroundSuccessLoud: ColorValue; + colorBackgroundSuccessSoft: ColorValue; + colorBackgroundSuccessSubtle: ColorValue; // stroke / neutral - colorStrokeNeutralHeavy: string; - colorStrokeNeutralLoud: string; - colorStrokeNeutralSoft: string; - colorStrokeNeutralSubtle: string; - colorStrokeNeutralTransparent: string; - colorStrokeNeutralOnloud: string; + colorStrokeNeutralHeavy: ColorValue; + colorStrokeNeutralLoud: ColorValue; + colorStrokeNeutralSoft: ColorValue; + colorStrokeNeutralSubtle: ColorValue; + colorStrokeNeutralTransparent: ColorValue; + colorStrokeNeutralOnloud: ColorValue; // stroke / brand - colorStrokeBrandLoud: string; - colorStrokeBrandSoft: string; - colorStrokeBrandSubtle: string; - colorStrokeBrandOnloud: string; + colorStrokeBrandLoud: ColorValue; + colorStrokeBrandSoft: ColorValue; + colorStrokeBrandSubtle: ColorValue; + colorStrokeBrandOnloud: ColorValue; // stroke / danger - colorStrokeDangerLoud: string; - colorStrokeDangerSoft: string; - colorStrokeDangerSubtle: string; - colorStrokeDangerOnloud: string; + colorStrokeDangerLoud: ColorValue; + colorStrokeDangerSoft: ColorValue; + colorStrokeDangerSubtle: ColorValue; + colorStrokeDangerOnloud: ColorValue; // stroke / warning - colorStrokeWarningLoud: string; - colorStrokeWarningSoft: string; - colorStrokeWarningSubtle: string; - colorStrokeWarningOnloud: string; + colorStrokeWarningLoud: ColorValue; + colorStrokeWarningSoft: ColorValue; + colorStrokeWarningSubtle: ColorValue; + colorStrokeWarningOnloud: ColorValue; // stroke / success - colorStrokeSuccessLoud: string; - colorStrokeSuccessSoft: string; - colorStrokeSuccessSubtle: string; - colorStrokeSuccessOnloud: string; + colorStrokeSuccessLoud: ColorValue; + colorStrokeSuccessSoft: ColorValue; + colorStrokeSuccessSubtle: ColorValue; + colorStrokeSuccessOnloud: ColorValue; // foreground / neutral - colorForegroundNeutralPrimary: string; - colorForegroundNeutralSecondary: string; - colorForegroundNeutralTertiary: string; - colorForegroundNeutralOnloud: string; + colorForegroundNeutralPrimary: ColorValue; + colorForegroundNeutralSecondary: ColorValue; + colorForegroundNeutralTertiary: ColorValue; + colorForegroundNeutralOnloud: ColorValue; // foreground / brand - colorForegroundBrandPrimary: string; - colorForegroundBrandOnloud: string; + colorForegroundBrandPrimary: ColorValue; + colorForegroundBrandOnloud: ColorValue; // foreground / danger - colorForegroundDangerPrimary: string; - colorForegroundDangerOnloud: string; + colorForegroundDangerPrimary: ColorValue; + colorForegroundDangerOnloud: ColorValue; // foreground / warning - colorForegroundWarningPrimary: string; - colorForegroundWarningOnloud: string; + colorForegroundWarningPrimary: ColorValue; + colorForegroundWarningOnloud: ColorValue; // foreground / success - colorForegroundSuccessPrimary: string; - colorForegroundSuccessOnloud: string; + colorForegroundSuccessPrimary: ColorValue; + colorForegroundSuccessOnloud: ColorValue; // fixed - colorFixedWhite: string; - colorFixedBlack: string; + colorFixedWhite: ColorValue; + colorFixedBlack: ColorValue; // expression / accent - colorExpressionAccentHeavy: string; - colorExpressionAccentLoud: string; - colorExpressionAccentSoft: string; - colorExpressionAccentSubtle: string; + colorExpressionAccentHeavy: ColorValue; + colorExpressionAccentLoud: ColorValue; + colorExpressionAccentSoft: ColorValue; + colorExpressionAccentSubtle: ColorValue; // expression / achromatic - colorExpressionAchromaticHeavy: string; - colorExpressionAchromaticSubtle: string; + colorExpressionAchromaticHeavy: ColorValue; + colorExpressionAchromaticSubtle: ColorValue; // expression / gray - colorExpressionGrayHeavy: string; - colorExpressionGrayLoud: string; - colorExpressionGraySoft: string; - colorExpressionGraySubtle: string; + colorExpressionGrayHeavy: ColorValue; + colorExpressionGrayLoud: ColorValue; + colorExpressionGraySoft: ColorValue; + colorExpressionGraySubtle: ColorValue; // expression / navy - colorExpressionNavyHeavy: string; - colorExpressionNavyLoud: string; - colorExpressionNavySoft: string; - colorExpressionNavySubtle: string; + colorExpressionNavyHeavy: ColorValue; + colorExpressionNavyLoud: ColorValue; + colorExpressionNavySoft: ColorValue; + colorExpressionNavySubtle: ColorValue; // expression / blue - colorExpressionBlueHeavy: string; - colorExpressionBlueLoud: string; - colorExpressionBlueSoft: string; - colorExpressionBlueSubtle: string; + colorExpressionBlueHeavy: ColorValue; + colorExpressionBlueLoud: ColorValue; + colorExpressionBlueSoft: ColorValue; + colorExpressionBlueSubtle: ColorValue; // expression / green - colorExpressionGreenHeavy: string; - colorExpressionGreenLoud: string; - colorExpressionGreenSoft: string; - colorExpressionGreenSubtle: string; + colorExpressionGreenHeavy: ColorValue; + colorExpressionGreenLoud: ColorValue; + colorExpressionGreenSoft: ColorValue; + colorExpressionGreenSubtle: ColorValue; // expression / lime - colorExpressionLimeHeavy: string; - colorExpressionLimeLoud: string; - colorExpressionLimeSoft: string; - colorExpressionLimeSubtle: string; + colorExpressionLimeHeavy: ColorValue; + colorExpressionLimeLoud: ColorValue; + colorExpressionLimeSoft: ColorValue; + colorExpressionLimeSubtle: ColorValue; // expression / yellow - colorExpressionYellowHeavy: string; - colorExpressionYellowLoud: string; - colorExpressionYellowSoft: string; - colorExpressionYellowSubtle: string; + colorExpressionYellowHeavy: ColorValue; + colorExpressionYellowLoud: ColorValue; + colorExpressionYellowSoft: ColorValue; + colorExpressionYellowSubtle: ColorValue; // expression / pumpkin - colorExpressionPumpkinHeavy: string; - colorExpressionPumpkinLoud: string; - colorExpressionPumpkinSoft: string; - colorExpressionPumpkinSubtle: string; + colorExpressionPumpkinHeavy: ColorValue; + colorExpressionPumpkinLoud: ColorValue; + colorExpressionPumpkinSoft: ColorValue; + colorExpressionPumpkinSubtle: ColorValue; // expression / red - colorExpressionRedHeavy: string; - colorExpressionRedLoud: string; - colorExpressionRedSoft: string; - colorExpressionRedSubtle: string; + colorExpressionRedHeavy: ColorValue; + colorExpressionRedLoud: ColorValue; + colorExpressionRedSoft: ColorValue; + colorExpressionRedSubtle: ColorValue; // expression / pink - colorExpressionPinkHeavy: string; - colorExpressionPinkLoud: string; - colorExpressionPinkSoft: string; - colorExpressionPinkSubtle: string; + colorExpressionPinkHeavy: ColorValue; + colorExpressionPinkLoud: ColorValue; + colorExpressionPinkSoft: ColorValue; + colorExpressionPinkSubtle: ColorValue; // expression / purple - colorExpressionPurpleHeavy: string; - colorExpressionPurpleLoud: string; - colorExpressionPurpleSoft: string; - colorExpressionPurpleSubtle: string; + colorExpressionPurpleHeavy: ColorValue; + colorExpressionPurpleLoud: ColorValue; + colorExpressionPurpleSoft: ColorValue; + colorExpressionPurpleSubtle: ColorValue; // overlay - colorOverlayNeutralTranslucent: string; + colorOverlayNeutralTranslucent: ColorValue; // material / background - colorMaterialBackgroundThick: string; - colorMaterialBackgroundRegular: string; - colorMaterialBackgroundThin: string; + colorMaterialBackgroundThick: ColorValue; + colorMaterialBackgroundRegular: ColorValue; + colorMaterialBackgroundThin: ColorValue; // disabled - colorBackgroundNeutralDisabled: string; - colorBackgroundNeutralHeavyDisabled: string; - colorBackgroundNeutralSubtleDisabled: string; - colorStrokeNeutralDisabled: string; - colorForegroundNeutralDisabled: string; + colorBackgroundNeutralDisabled: ColorValue; + colorBackgroundNeutralHeavyDisabled: ColorValue; + colorBackgroundNeutralSubtleDisabled: ColorValue; + colorStrokeNeutralDisabled: ColorValue; + colorForegroundNeutralDisabled: ColorValue; // focus strokes - colorStrokeFocusInner: string; - colorStrokeFocusOuter: string; + colorStrokeFocusInner: ColorValue; + colorStrokeFocusOuter: ColorValue; // shadow - colorShadow: string; + colorShadow: ColorValue; }; /** @@ -282,26 +290,26 @@ export type SemanticColors = SemanticColorTokenValues & { */ export type SemanticTokens = SemanticColors & { // shadow - shadowLowest: string; - shadowLower: string; - shadowLow: string; - shadowHigh: string; - shadowHigher: string; - shadowHighest: string; + shadowLowest: ShadowToken; + shadowLower: ShadowToken; + shadowLow: ShadowToken; + shadowHigh: ShadowToken; + shadowHigher: ShadowToken; + shadowHighest: ShadowToken; // font weight - fontWeightFunctionalRegular: number; - fontWeightFunctionalMedium: number; - fontWeightFunctionalSemibold: number; - fontWeightFunctionalBold: number; - fontWeightContentRegular: number; - fontWeightContentMedium: number; - fontWeightContentSemibold: number; - fontWeightContentBold: number; - fontWeightContentEditorialRegular: number; - fontWeightContentEditorialMedium: number; - fontWeightContentEditorialSemibold: number; - fontWeightContentEditorialBold: number; + 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; @@ -309,6 +317,107 @@ export type SemanticTokens = SemanticColors & { 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; @@ -336,100 +445,4 @@ export type SemanticTokens = SemanticColors & { letterSpacingContentSubtext: string; letterSpacingContentTable: string; letterSpacingContentCode: string; - - // font size - fontSizeFunctionalDisplay: string; - fontSizeFunctionalPagetitle: string; - fontSizeFunctionalTitleLarge: string; - fontSizeFunctionalTitleMedium: string; - fontSizeFunctionalTitleSmall: string; - fontSizeFunctionalSubtitle: string; - fontSizeFunctionalBodyLarge: string; - fontSizeFunctionalBodyMedium: string; - fontSizeFunctionalBodySmall: string; - fontSizeFunctionalCaption: string; - fontSizeContentStatement: string; - fontSizeContentExpressiveLarge: string; - fontSizeContentExpressiveMedium: string; - fontSizeContentExpressiveSmall: string; - fontSizeContentH1: string; - fontSizeContentH2: string; - fontSizeContentH3: string; - fontSizeContentH4: string; - fontSizeContentH5: string; - fontSizeContentSubheadline: string; - fontSizeContentParagraphLarge: string; - fontSizeContentParagraphMedium: string; - fontSizeContentParagraphSmall: string; - fontSizeContentSubtext: string; - fontSizeContentTable: string; - fontSizeContentCode: string; - - // line height - lineHeightFunctionalDisplay: string; - lineHeightFunctionalPagetitle: string; - lineHeightFunctionalTitleLarge: string; - lineHeightFunctionalTitleMedium: string; - lineHeightFunctionalTitleSmall: string; - lineHeightFunctionalSubtitle: string; - lineHeightFunctionalBodyLarge: string; - lineHeightFunctionalBodyMedium: string; - lineHeightFunctionalBodySmall: string; - lineHeightFunctionalCaption: string; - lineHeightContentStatement: string; - lineHeightContentExpressiveLarge: string; - lineHeightContentExpressiveMedium: string; - lineHeightContentExpressiveSmall: string; - lineHeightContentH1: string; - lineHeightContentH2: string; - lineHeightContentH3: string; - lineHeightContentH4: string; - lineHeightContentH5: string; - lineHeightContentSubheadline: string; - lineHeightContentParagraphLarge: string; - lineHeightContentParagraphMedium: string; - lineHeightContentParagraphSmall: string; - lineHeightContentSubtext: string; - lineHeightContentTable: string; - lineHeightContentCode: string; - - // border radius - borderRadiusBase100: string; - borderRadiusBase200: string; - borderRadiusBase300: string; - borderRadiusBase400: string; - borderRadiusBase600: string; - borderRadiusBase700: string; - borderRadiusCircular: string; - - // spacing / component - spacingComponentBase50: string; - spacingComponentBase100: string; - spacingComponentBase150: string; - spacingComponentBase200: string; - spacingComponentBase250: string; - spacingComponentBase300: string; - spacingComponentBase400: string; - spacingComponentBase500: string; - spacingComponentBase600: string; - spacingComponentBase700: string; - - // spacing / layout - spacingLayoutBase100: string; - spacingLayoutBase200: string; - spacingLayoutBase300: string; - spacingLayoutBase400: string; - spacingLayoutBase450: string; - spacingLayoutBase500: string; - spacingLayoutBase600: string; - spacingLayoutBase700: string; - spacingLayoutBase800: string; - spacingLayoutBase1000: string; - spacingLayoutBase1200: string; - - // stroke width - strokeWidthThin: string; - strokeWidthThick: string; - strokeWidthThicker: string; - strokeWidthThickest: string; -}; +} \ No newline at end of file