From 2914fd287c1dc77460104642a4e5819ac752080f Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Tue, 21 Jul 2026 14:57:23 -0700 Subject: [PATCH 1/3] add default values for the flex tokens --- .../src/tokens/defaultTokens.ts | 273 ++++++++++++++++++ .../agentic-design/src/tokens/flex.types.ts | 257 +++++++++-------- .../src/tokens/useFlexTokens.ts | 10 + 3 files changed, 417 insertions(+), 123 deletions(-) create mode 100644 packages/agentic-design/src/tokens/defaultTokens.ts create mode 100644 packages/agentic-design/src/tokens/useFlexTokens.ts diff --git a/packages/agentic-design/src/tokens/defaultTokens.ts b/packages/agentic-design/src/tokens/defaultTokens.ts new file mode 100644 index 0000000000..c90323c31a --- /dev/null +++ b/packages/agentic-design/src/tokens/defaultTokens.ts @@ -0,0 +1,273 @@ +import type { FlexTokens } from './flex.types'; + +/** + * Use the mapping of semantic color tokens to their alias names to generate a temporary default set of color tokens. + * These map to values from the @fluentui-react-native/design-tokens-win32 package under the colorful path. + */ +export const defaultSemanticColors: FlexTokens = { + colorSurfaceNeutralFarther: '#ebebeb', + colorSurfaceNeutralFar: '#f5f5f5', + colorSurfaceNeutralNear: '#fafafa', + colorSurfaceNeutralNearer: '#ffffff', + colorSurfaceNeutralTranslucent: '#ffffff80', + colorBackgroundNeutralHeavy: '#616161', + colorBackgroundNeutralLoud: '#616161', + colorBackgroundNeutralSoft: '#0000001a', + colorBackgroundNeutralSubtle: '#00000000', + colorBackgroundNeutralTransparent: '#00000000', + colorBackgroundNeutralTranslucent: '#ffffff80', + colorBackgroundBrandHeavy: '#185abd', + colorBackgroundBrandLoud: '#185abd', + colorBackgroundBrandSoft: '#d2e0f4', + colorBackgroundBrandSubtle: '#d2e0f4', + colorBackgroundBrandTransparent: '#00000000', + colorBackgroundDangerLoud: '#d13438', + colorBackgroundDangerSoft: '#f1bbbc', + colorBackgroundDangerSubtle: '#fdf6f6', + colorBackgroundWarningLoud: '#fde300', + colorBackgroundWarningSoft: '#fef7b2', + colorBackgroundWarningSubtle: '#fffef5', + colorBackgroundSuccessLoud: '#107c10', + colorBackgroundSuccessSoft: '#9fd89f', + colorBackgroundSuccessSubtle: '#f1faf1', + colorStrokeNeutralHeavy: '#616161', + colorStrokeNeutralLoud: '#d1d1d1', + colorStrokeNeutralSoft: '#d1d1d1', + colorStrokeNeutralSubtle: '#e0e0e0', + colorStrokeNeutralTransparent: '#00000000', + colorStrokeNeutralOnloud: '#ffffff', + colorStrokeBrandLoud: '#185abd', + colorStrokeBrandSoft: '#185abd', + colorStrokeBrandSubtle: '#6794d7', + colorStrokeBrandOnloud: '#ffffff', + colorStrokeDangerLoud: '#d13438', + colorStrokeDangerSoft: '#f1bbbc', + colorStrokeDangerSubtle: '#f1bbbc', + colorStrokeDangerOnloud: '#ffffff', + colorStrokeWarningLoud: '#fde300', + colorStrokeWarningSoft: '#fef7b2', + colorStrokeWarningSubtle: '#fef7b2', + colorStrokeWarningOnloud: '#ffffff', + colorStrokeSuccessLoud: '#107c10', + colorStrokeSuccessSoft: '#9fd89f', + colorStrokeSuccessSubtle: '#9fd89f', + colorStrokeSuccessOnloud: '#ffffff', + colorForegroundNeutralPrimary: '#242424', + colorForegroundNeutralSecondary: '#424242', + colorForegroundNeutralTertiary: '#616161', + colorForegroundNeutralOnloud: '#ffffff', + colorForegroundBrandPrimary: '#185abd', + colorForegroundBrandOnloud: '#ffffff', + colorForegroundDangerPrimary: '#bc2f32', + colorForegroundDangerOnloud: '#ffffff', + colorForegroundWarningPrimary: '#817400', + colorForegroundWarningOnloud: '#ffffff', + colorForegroundSuccessPrimary: '#0e700e', + colorForegroundSuccessOnloud: '#ffffff', + colorFixedWhite: '#ffffff', + colorFixedBlack: '#000000', + colorExpressionAccentHeavy: '#242424', + colorExpressionAccentLoud: '#707070', + colorExpressionAccentSoft: '#0000001a', + colorExpressionAccentSubtle: '#0000000d', + colorExpressionAchromaticHeavy: '#000000', + colorExpressionAchromaticSubtle: '#ffffff', + colorExpressionGrayHeavy: '#474747', + colorExpressionGrayLoud: '#949494', + colorExpressionGraySoft: '#e0e0e0', + colorExpressionGraySubtle: '#f5f5f5', + colorExpressionNavyHeavy: '#001e89', + colorExpressionNavyLoud: '#546fd2', + colorExpressionNavySoft: '#ccd5f3', + colorExpressionNavySubtle: '#f2f4fc', + colorExpressionBlueHeavy: '#004377', + colorExpressionBlueLoud: '#3595de', + colorExpressionBlueSoft: '#d0e7f8', + colorExpressionBlueSubtle: '#f3f9fd', + colorExpressionGreenHeavy: '#0c5e0c', + colorExpressionGreenLoud: '#54b054', + colorExpressionGreenSoft: '#c9eac9', + colorExpressionGreenSubtle: '#f1faf1', + colorExpressionLimeHeavy: '#405f14', + colorExpressionLimeLoud: '#689920', + colorExpressionLimeSoft: '#cfe5af', + colorExpressionLimeSubtle: '#e5f1d3', + colorExpressionYellowHeavy: '#4c4400', + colorExpressionYellowLoud: '#fde300', + colorExpressionYellowSoft: '#feee66', + colorExpressionYellowSubtle: '#fef7b2', + colorExpressionPumpkinHeavy: '#712d09', + colorExpressionPumpkinLoud: '#df8e64', + colorExpressionPumpkinSoft: '#f7dfd2', + colorExpressionPumpkinSubtle: '#fdf7f4', + colorExpressionRedHeavy: '#751d1f', + colorExpressionRedLoud: '#dc5e62', + colorExpressionRedSoft: '#f8dadb', + colorExpressionRedSubtle: '#fdf6f6', + colorExpressionPinkHeavy: '#80215d', + colorExpressionPinkLoud: '#e750b0', + colorExpressionPinkSoft: '#f7c0e3', + colorExpressionPinkSubtle: '#fef6fb', + colorExpressionPurpleHeavy: '#532982', + colorExpressionPurpleLoud: '#9470bd', + colorExpressionPurpleSoft: '#e0d3ed', + colorExpressionPurpleSubtle: '#f7f4fb', + colorOverlayNeutralTranslucent: '#ffffff80', + colorMaterialBackgroundThick: '#ffffffe6', + colorMaterialBackgroundRegular: '#ffffffcc', + colorMaterialBackgroundThin: '#ffffff80', + colorBackgroundNeutralDisabled: '#f0f0f0', + colorBackgroundNeutralHeavyDisabled: '#f0f0f0', + colorBackgroundNeutralSubtleDisabled: '#f0f0f0', + colorStrokeNeutralDisabled: '#e0e0e0', + colorForegroundNeutralDisabled: '#bdbdbd', + colorStrokeFocusInner: '#ffffff', + colorStrokeFocusOuter: '#000000', + colorShadow: '#000000', + shadowLowest: { + ambient: { color: '#0000001f', x: 0, y: 0, blur: 2 }, + key: { color: '#00000024', x: 0, y: 1, blur: 2 }, + }, + shadowLower: { + ambient: { color: '#0000001f', x: 0, y: 0, blur: 2 }, + key: { color: '#00000024', x: 0, y: 2, blur: 4 }, + }, + shadowLow: { + ambient: { color: '#0000001f', x: 0, y: 0, blur: 2 }, + key: { color: '#00000024', x: 0, y: 4, blur: 8 }, + }, + shadowHigh: { + ambient: { color: '#0000001f', x: 0, y: 0, blur: 2 }, + key: { color: '#00000024', x: 0, y: 8, blur: 16 }, + }, + shadowHigher: { + ambient: { color: '#00000033', x: 0, y: 0, blur: 8 }, + key: { color: '#0000003d', x: 0, y: 14, blur: 28 }, + }, + shadowHighest: { + ambient: { color: '#00000033', x: 0, y: 0, blur: 8 }, + key: { color: '#0000003d', x: 0, y: 32, blur: 64 }, + }, + hover: { + colorSurfaceNeutralFarther: '#f5f5f5', + colorSurfaceNeutralFar: '#ebebeb', + colorSurfaceNeutralNear: '#f0f0f0', + colorSurfaceNeutralNearer: '#f5f5f5', + colorSurfaceNeutralTranslucent: '#ffffff80', + colorBackgroundNeutralHeavy: '#616161', + colorBackgroundNeutralLoud: '#616161', + colorBackgroundNeutralSoft: '#0000001a', + colorBackgroundNeutralSubtle: '#f5f5f5', + colorBackgroundNeutralTransparent: '#00000000', + colorBackgroundNeutralTranslucent: '#ffffff80', + colorBackgroundBrandHeavy: '#1651aa', + colorBackgroundBrandLoud: '#1651aa', + colorBackgroundBrandSoft: '#d2e0f4', + colorBackgroundBrandSubtle: '#d2e0f4', + colorBackgroundBrandTransparent: '#00000000', + colorBackgroundDangerLoud: '#d13438', + colorBackgroundDangerSoft: '#f1bbbc', + colorBackgroundDangerSubtle: '#fdf6f6', + colorBackgroundWarningLoud: '#fde300', + colorBackgroundWarningSoft: '#fef7b2', + colorBackgroundWarningSubtle: '#fffef5', + colorBackgroundSuccessLoud: '#107c10', + colorBackgroundSuccessSoft: '#9fd89f', + colorBackgroundSuccessSubtle: '#f1faf1', + colorStrokeNeutralHeavy: '#575757', + colorStrokeNeutralLoud: '#c7c7c7', + colorStrokeNeutralSoft: '#c7c7c7', + colorStrokeNeutralSubtle: '#e0e0e0', + colorStrokeNeutralTransparent: '#00000000', + colorStrokeNeutralOnloud: '#ffffff', + colorStrokeBrandLoud: '#185abd', + colorStrokeBrandSoft: '#185abd', + colorStrokeBrandSubtle: '#6794d7', + colorStrokeBrandOnloud: '#ffffff', + colorStrokeDangerLoud: '#d13438', + colorStrokeDangerSoft: '#f1bbbc', + colorStrokeDangerSubtle: '#f1bbbc', + colorStrokeDangerOnloud: '#ffffff', + colorStrokeWarningLoud: '#fde300', + colorStrokeWarningSoft: '#fef7b2', + colorStrokeWarningSubtle: '#fef7b2', + colorStrokeWarningOnloud: '#ffffff', + colorStrokeSuccessLoud: '#107c10', + colorStrokeSuccessSoft: '#9fd89f', + colorStrokeSuccessSubtle: '#9fd89f', + colorStrokeSuccessOnloud: '#ffffff', + colorForegroundNeutralPrimary: '#242424', + colorForegroundNeutralSecondary: '#242424', + colorForegroundNeutralTertiary: '#424242', + colorForegroundNeutralOnloud: '#ffffff', + colorForegroundBrandPrimary: '#185abd', + colorForegroundBrandOnloud: '#ffffff', + colorForegroundDangerPrimary: '#bc2f32', + colorForegroundDangerOnloud: '#ffffff', + colorForegroundWarningPrimary: '#817400', + colorForegroundWarningOnloud: '#ffffff', + colorForegroundSuccessPrimary: '#0e700e', + colorForegroundSuccessOnloud: '#ffffff', + }, + pressed: { + colorSurfaceNeutralFarther: '#f0f0f0', + colorSurfaceNeutralFar: '#d6d6d6', + colorSurfaceNeutralNear: '#dbdbdb', + colorSurfaceNeutralNearer: '#e0e0e0', + colorSurfaceNeutralTranslucent: '#ffffff80', + colorBackgroundNeutralHeavy: '#616161', + colorBackgroundNeutralLoud: '#616161', + colorBackgroundNeutralSoft: '#0000001a', + colorBackgroundNeutralSubtle: '#e0e0e0', + colorBackgroundNeutralTransparent: '#00000000', + colorBackgroundNeutralTranslucent: '#ffffff80', + colorBackgroundBrandHeavy: '#0e336a', + colorBackgroundBrandLoud: '#0e336a', + colorBackgroundBrandSoft: '#d2e0f4', + colorBackgroundBrandSubtle: '#d2e0f4', + colorBackgroundBrandTransparent: '#00000000', + colorBackgroundDangerLoud: '#d13438', + colorBackgroundDangerSoft: '#f1bbbc', + colorBackgroundDangerSubtle: '#fdf6f6', + colorBackgroundWarningLoud: '#fde300', + colorBackgroundWarningSoft: '#fef7b2', + colorBackgroundWarningSubtle: '#fffef5', + colorBackgroundSuccessLoud: '#107c10', + colorBackgroundSuccessSoft: '#9fd89f', + colorBackgroundSuccessSubtle: '#f1faf1', + colorStrokeNeutralHeavy: '#4d4d4d', + colorStrokeNeutralLoud: '#b3b3b3', + colorStrokeNeutralSoft: '#b3b3b3', + colorStrokeNeutralSubtle: '#e0e0e0', + colorStrokeNeutralTransparent: '#00000000', + colorStrokeNeutralOnloud: '#ffffff', + colorStrokeBrandLoud: '#185abd', + colorStrokeBrandSoft: '#185abd', + colorStrokeBrandSubtle: '#6794d7', + colorStrokeBrandOnloud: '#ffffff', + colorStrokeDangerLoud: '#d13438', + colorStrokeDangerSoft: '#f1bbbc', + colorStrokeDangerSubtle: '#f1bbbc', + colorStrokeDangerOnloud: '#ffffff', + colorStrokeWarningLoud: '#fde300', + colorStrokeWarningSoft: '#fef7b2', + colorStrokeWarningSubtle: '#fef7b2', + colorStrokeWarningOnloud: '#ffffff', + colorStrokeSuccessLoud: '#107c10', + colorStrokeSuccessSoft: '#9fd89f', + colorStrokeSuccessSubtle: '#9fd89f', + colorStrokeSuccessOnloud: '#ffffff', + colorForegroundNeutralPrimary: '#242424', + colorForegroundNeutralSecondary: '#242424', + colorForegroundNeutralTertiary: '#424242', + colorForegroundNeutralOnloud: '#ffffff', + colorForegroundBrandPrimary: '#185abd', + colorForegroundBrandOnloud: '#ffffff', + colorForegroundDangerPrimary: '#bc2f32', + colorForegroundDangerOnloud: '#ffffff', + colorForegroundWarningPrimary: '#817400', + colorForegroundWarningOnloud: '#ffffff', + colorForegroundSuccessPrimary: '#0e700e', + colorForegroundSuccessOnloud: '#ffffff', + }, +}; diff --git a/packages/agentic-design/src/tokens/flex.types.ts b/packages/agentic-design/src/tokens/flex.types.ts index fb4eb8ede4..4524c990b8 100644 --- a/packages/agentic-design/src/tokens/flex.types.ts +++ b/packages/agentic-design/src/tokens/flex.types.ts @@ -6,6 +6,11 @@ type FontSize = TextStyle['fontSize']; type BorderRadius = ViewStyle['borderRadius']; type StrokeWidth = ViewStyle['borderWidth']; +/** + * The themable semantic token set: all `SemanticColors` plus the shadow tokens. + */ +export type FlexTokens = SemanticColors & SemanticShadows; + /** * 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 @@ -281,14 +286,9 @@ export type SemanticColors = SemanticColorTokenValues & { }; /** - * 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`. + * The semantic shadow token set */ -export type SemanticTokens = SemanticColors & { +export type SemanticShadows = { // shadow shadowLowest: ShadowToken; shadowLower: ShadowToken; @@ -296,124 +296,135 @@ export type SemanticTokens = SemanticColors & { 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; }; +/** + * 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 & + SemanticShadows & { + // 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. */ diff --git a/packages/agentic-design/src/tokens/useFlexTokens.ts b/packages/agentic-design/src/tokens/useFlexTokens.ts new file mode 100644 index 0000000000..44da857f34 --- /dev/null +++ b/packages/agentic-design/src/tokens/useFlexTokens.ts @@ -0,0 +1,10 @@ +import type { FlexTokens } from './flex.types'; +import { defaultSemanticColors } from './defaultTokens'; + +/** + * Hook to access the current set of Flex tokens. + * @returns The current Flex tokens. + */ +export function useFlexTokens(): FlexTokens { + return defaultSemanticColors; +} From 481d1dbc8d0299a53a1321042efbb502c39ed4f1 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Tue, 21 Jul 2026 14:59:26 -0700 Subject: [PATCH 2/3] fix the builds for jsx-config.js reference --- packages/framework-base/targets/tsconfig.check.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/framework-base/targets/tsconfig.check.json b/packages/framework-base/targets/tsconfig.check.json index c32bd0039f..20854bef08 100644 --- a/packages/framework-base/targets/tsconfig.check.json +++ b/packages/framework-base/targets/tsconfig.check.json @@ -8,5 +8,10 @@ "composite": true, "tsBuildInfoFile": "../.cache/tsconfig.check.tsbuildinfo" }, - "include": ["../src"] + "include": ["../src", "../jsx-runtime.js"], + "references": [ + { + "path": "./tsconfig.build.json" + } + ] } From e4b1625d7993a4935f6bd1ff7f69d7f9c7d38f81 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Tue, 21 Jul 2026 15:00:30 -0700 Subject: [PATCH 3/3] add changeset --- .changeset/giant-cobras-mate.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/giant-cobras-mate.md diff --git a/.changeset/giant-cobras-mate.md b/.changeset/giant-cobras-mate.md new file mode 100644 index 0000000000..6b12b70b99 --- /dev/null +++ b/.changeset/giant-cobras-mate.md @@ -0,0 +1,6 @@ +--- +"@fluentui-react-native/design": patch +"@fluentui-react-native/framework-base": patch +--- + +Add a default implementation of flex tokens