@fluentui-react-native/theme-types 0.44.5 → 0.44.8

package/src/Shadow.types.ts

@@ -1,51 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-/**
- * Base structure of a shadow style, which has x and y offset, blur amount, and color specified
- */
-export interface ShadowValue {
-  x: number;
-  y: number;
-  blur: number;
-  color: ColorValue;
-}
-
-/**
- * In FluentUI a shadow is specified as having two parts - an ambient shadow and a key shadow.
- * The ambient shadow is shading around the entire control
- * The key shadow is the offset shadow which gives the control a sense of elevation or distance from the page
- */
-export interface ShadowToken {
-  ambient: ShadowValue;
-  key: ShadowValue;
-}
-
-/**
- * Shadows alias tokens as defined by FluentUI v2 design system
- */
-export interface BaseShadowAliasTokens {
-  shadow2: ShadowToken;
-  shadow4: ShadowToken;
-  shadow8: ShadowToken;
-  shadow16: ShadowToken;
-  shadow28: ShadowToken;
-  shadow64: ShadowToken;
-  shadow2brand: ShadowToken;
-  shadow4brand: ShadowToken;
-  shadow8brand: ShadowToken;
-  shadow16brand: ShadowToken;
-  shadow28brand: ShadowToken;
-  shadow64brand: ShadowToken;
-}
-
-/**
- * Shadows on the theme object. This allows for flexibility on entries but retains base alias tokens
- */
-export type ThemeShadowDefinition = BaseShadowAliasTokens & {
-  [key: string]: ShadowToken;
-};
-
-/**
- * A partially specified shadow definition.
- */
-export type PartialShadowDefinition = { [P in keyof ThemeShadowDefinition]?: Partial<ThemeShadowDefinition[P]> };

package/src/Theme.types.ts

@@ -1,73 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-import type { ThemeColorDefinition } from './Color.types';
-import type { OfficePalette } from './palette.types';
-import type { PartialShadowDefinition, ThemeShadowDefinition } from './Shadow.types';
-import type { Typography, PartialTypography } from './Typography.types';
-
-type TwoLevelPartial<T> = { [K in keyof T]?: Partial<T[K]> };
-
-export interface Spacing {
-  s2: `${number}px`;
-  s1: `${number}px`;
-  m?: `${number}px`;
-  // m is now defined as a v2 type
-  l1: `${number}px`;
-  l2: `${number}px`;
-}
-
-/**
- * A fully specified theme.
- */
-export interface Theme {
-  name?: string;
-  colors: ThemeColorDefinition;
-  typography: Typography;
-  components: {
-    [key: string]: Record<string, unknown>;
-  };
-  shadows: ThemeShadowDefinition;
-  readonly spacing: Spacing;
-  host: {
-    // appearance of the theme, this corresponds to the react-native Appearance library values, though can be overwritten
-    // dynamic refers to a theme that handles it's own appearance switching, such as one that uses the PlatformColor API
-    appearance: AppearanceOptions | 'dynamic';
-
-    // Office palette, if running in Office with the native module connected in the theme
-    palette?: OfficePalette;
-    colors?: { [key: string]: ColorValue };
-  };
-}
-
-/**
- * Generally a partial theme is comprised of partial versions of the objects within the theme, with the exception of shadow and typography
- * which has additional levels of hierarchy
- */
-export type PartialTheme = Omit<TwoLevelPartial<Theme>, 'shadows' | 'typography' | 'host'> & {
-  shadows?: PartialShadowDefinition;
-  typography?: PartialTypography;
-  host?: TwoLevelPartial<Theme['host']>;
-};
-
-export type AppearanceOptions = 'light' | 'dark' | 'darkElevated' | 'highContrast';
-
-export interface ThemeOptions {
-  /**
-   * Should the baseline colors be light, dark, or use the values from the Appearance API from react-native.
-   */
-  appearance?: AppearanceOptions | 'dynamic';
-
-  /**
-   * Default appearance should the library to request this from native not be available
-   */
-  defaultAppearance?: AppearanceOptions;
-
-  /**
-   * If in a host that supports multiple areas within the app that use different palettes, this specifies the palette name to
-   * load.
-   *
-   * In Office this corresponds to regions like taskpanes, the ribbon, left navigation, and so on, but that concept could be extended
-   * to any host that wants to support this.
-   */
-  paletteName?: string;
-}

package/src/Typography.types.ts

@@ -1,185 +0,0 @@
-import type { TextProps, TextStyle } from 'react-native';
-
-/**
- * A font family designation, made up of one or more font names or groupings
- * (comma-separated):
- *
- * - `Calibri Light`, `Calibri, Times`
- * - `Menlo, Monaco`, `Courier New`, `Courier`
- * - `Consolas`
- *
- * The font family expresses an ordered preference of fonts to use, working
- * from the first entry to the last. This "fallback" mechanism is necessary
- * because the availability of specific fonts varies between native platforms,
- * as well as between operating system versions.
- */
-export type FontFamilyValue = string;
-
-/**
- * A collection of named font families.
- *
- * The names express the fundamental character of the assigned font family. They
- * should be used when defining a theme.
- *
- * **NOTE:** `primary` and `secondary` are both meant to be assigned a 'normal' family.
- */
-export interface FontFamilies {
-  primary: FontFamilyValue;
-  secondary: FontFamilyValue;
-  cursive: FontFamilyValue;
-  monospace: FontFamilyValue;
-  numeric: FontFamilyValue;
-  sansSerif: FontFamilyValue;
-  serif: FontFamilyValue;
-}
-
-/**
- * A font family, used when defining a visual element in a theme.
- */
-export type FontFamily = keyof FontFamilies | FontFamilyValue;
-
-/**
- * A font size value, specified in CSS pixels (px).
- */
-export type FontSizeValuePoints = number;
-
-/**
- * A collection of named font sizes.
- *
- * The names express a spectrum of relative sizes. Words are used instead
- * of numbers to avoid implying anything about the size value, or its
- * relationship to size values near it.
- *
- * These names should be used when defining a theme.
- */
-export interface FontSizes {
-  caption: FontSizeValuePoints;
-  secondary: FontSizeValuePoints;
-  body: FontSizeValuePoints;
-  subheader: FontSizeValuePoints;
-  header: FontSizeValuePoints;
-  hero: FontSizeValuePoints;
-  heroLarge: FontSizeValuePoints;
-}
-
-/**
- * A font size, used when defining a visual element in a theme.
- */
-export type FontSize = keyof FontSizes | FontSizeValuePoints;
-
-/**
- * A font weight value.
- *
- * Smaller numbers yield a thinner, lighter font. Larger numbers yield a thicker, darker
- * font.
- */
-export type FontWeightValue = TextStyle['fontWeight'];
-
-/**
- * A collection of named font weights.
- *
- * The names express a spectrum of relative weights. Words are used instead
- * of numbers to avoid implying anything about the weight value, or its
- * relationship to weight values near it.
- *
- * These names should be used when defining a theme.
- */
-export interface FontWeights {
-  regular: FontWeightValue;
-  semiBold: FontWeightValue;
-}
-
-/**
- * A font weight, used when defining a visual element in a theme.
- */
-export type FontWeight = keyof FontWeights | FontWeightValue;
-
-/**
- * A font line height value, specified in CSS pixels (px).
- */
-export type FontLineHeight = number;
-
-/**
- * A font letter spacing value, specified in points on Apple platforms and ems everywhere else.
- */
-export type FontLetterSpacing = number;
-
-/**
- * On iOS, the Dynamic Type ramp that this variant should conform to.
- */
-export type FontDynamicTypeRamp = TextProps['dynamicTypeRamp'];
-
-/**
- * A font variant value.
- */
-export type VariantValue = {
-  face: FontFamily;
-  size: FontSize;
-  weight: FontWeight;
-  lineHeight?: FontLineHeight;
-  letterSpacing?: FontLetterSpacing;
-  dynamicTypeRamp?: FontDynamicTypeRamp;
-};
-
-/**
- * A collection of named font variants.
- */
-export interface Variants {
-  captionStandard: VariantValue;
-  secondaryStandard: VariantValue;
-  secondarySemibold: VariantValue;
-  bodyStandard: VariantValue;
-  bodySemibold: VariantValue;
-  subheaderStandard: VariantValue;
-  subheaderSemibold: VariantValue;
-  headerStandard: VariantValue;
-  headerSemibold: VariantValue;
-  heroStandard: VariantValue;
-  heroSemibold: VariantValue;
-  heroLargeStandard: VariantValue;
-  heroLargeSemibold: VariantValue;
-  //v2 variants
-  caption1?: VariantValue;
-  caption1Strong?: VariantValue;
-  caption2?: VariantValue;
-  body1?: VariantValue;
-  body1Strong?: VariantValue;
-  body2?: VariantValue;
-  body2Strong?: VariantValue;
-  subtitle1?: VariantValue;
-  subtitle1Strong?: VariantValue;
-  subtitle2?: VariantValue;
-  subtitle2Strong?: VariantValue;
-  title1?: VariantValue;
-  title1Strong?: VariantValue;
-  title2?: VariantValue;
-  title3?: VariantValue;
-  largeTitle?: VariantValue;
-  display?: VariantValue;
-}
-
-/**
- * A font variant, used when defining a visual element in a theme.
- */
-export type Variant = keyof Variants | VariantValue;
-
-/**
- * A collection of typographic (font) information.
- *
- * When setting a font in a theme, choose a family, size and weight from
- * this collection.
- */
-
-export interface TextStyling {
-  families: FontFamilies;
-  sizes: FontSizes;
-  weights: FontWeights;
-  variants: Variants;
-}
-
-export type Typography = TextStyling;
-
-/**
- * A partially specified typography.
- */
-export type PartialTypography = { [P in keyof Typography]?: Partial<Typography[P]> };

package/src/context.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-
-import type { Theme } from './Theme.types';
-
-export const ThemeContext = React.createContext<Theme>(undefined);
-export const useTheme = () => React.useContext(ThemeContext);

package/src/palette.types.ts

@@ -1,257 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-export interface OfficePalette {
-  /**
-   * Background Colors
-   *
-   * Background color for any region of the user interface.
-   */
-  Bkg: ColorValue;
-  BkgHover: ColorValue;
-  BkgPressed: ColorValue;
-  BkgSelected: ColorValue;
-  BkgSelectionHighlight: ColorValue;
-  BkgSubtle: ColorValue;
-
-  /**
-   * Transparent Control Colors
-   *
-   * These colors should be used to build controls with a transparent
-   * background. For example, list items and ribbon buttons.
-   */
-  // text
-  Text: ColorValue;
-  TextRest: ColorValue;
-  TextHover: ColorValue;
-  TextPressed: ColorValue;
-  TextSelected: ColorValue;
-  TextDisabled: ColorValue;
-  TextSelectionHighlight: ColorValue;
-
-  TextSecondary: ColorValue;
-  TextSecondaryRest: ColorValue;
-  TextSecondaryHover: ColorValue;
-  TextSecondaryPressed: ColorValue;
-  TextSecondarySelected: ColorValue;
-
-  // emphasized text, usually with an accent color
-  TextEmphasis: ColorValue;
-  TextEmphasisRest: ColorValue;
-  TextEmphasisHover: ColorValue;
-  TextEmphasisPressed: ColorValue;
-  TextEmphasisSelected: ColorValue;
-
-  // stroke colors (typically borders, outlines or underlines)
-  StrokeSelectedHover: ColorValue;
-  StrokeKeyboard: ColorValue;
-
-  // stroke overlay colors (typically borders, outlines or underlines)
-  StrokeOverRest: ColorValue;
-  StrokeOverHover: ColorValue;
-  StrokeOverPressed: ColorValue;
-  StrokeOverSelectedRest: ColorValue;
-  StrokeOverSelectedHover: ColorValue;
-  StrokeOverSelectedPressed: ColorValue;
-
-  /**
-   * Push Button Controls
-   *
-   * Push button controls only. These controls have a non-transparent
-   * background. Most other controls should not use these colors.
-   */
-  // background
-  BkgCtl: ColorValue;
-  BkgCtlHover: ColorValue;
-  BkgCtlPressed: ColorValue;
-  BkgCtlSelected: ColorValue;
-  BkgCtlDisabled: ColorValue;
-
-  // text
-  TextCtl: ColorValue;
-  TextCtlHover: ColorValue;
-  TextCtlPressed: ColorValue;
-  TextCtlSelected: ColorValue;
-  TextCtlDisabled: ColorValue;
-
-  // stroke colors (typically borders, outlines or underlines)
-  StrokeCtl: ColorValue;
-  StrokeCtlHover: ColorValue;
-  StrokeCtlPressed: ColorValue;
-  StrokeCtlSelected: ColorValue;
-  StrokeCtlDisabled: ColorValue;
-  StrokeCtlKeyboard: ColorValue;
-
-  /**
-   * Emphasized Push Button Controls
-   *
-   * Push button controls only. These controls have a non-transparent
-   * background. Most other controls should not use these colors.
-   */
-  // background
-  BkgCtlEmphasis: ColorValue;
-  BkgCtlEmphasisHover: ColorValue;
-  BkgCtlEmphasisPressed: ColorValue;
-  BkgCtlEmphasisDisabled: ColorValue;
-
-  // text
-  TextCtlEmphasis: ColorValue;
-  TextCtlEmphasisHover: ColorValue;
-  TextCtlEmphasisPressed: ColorValue;
-  TextCtlEmphasisDisabled: ColorValue;
-
-  // stroke colors (typically borders, outlines or underlines)
-  StrokeCtlEmphasis: ColorValue;
-  StrokeCtlEmphasisHover: ColorValue;
-  StrokeCtlEmphasisPressed: ColorValue;
-  StrokeCtlEmphasisDisabled: ColorValue;
-  StrokeCtlEmphasisKeyboard: ColorValue;
-
-  /**
-   * Text Controls
-   *
-   * Controls which have a background, even in dark themes, such as text box,
-   * combo box, check box, and radio button.
-   */
-  // background
-  BkgCtlSubtle: ColorValue;
-  BkgCtlSubtleHover: ColorValue;
-  BkgCtlSubtlePressed: ColorValue;
-  BkgCtlSubtleDisabled: ColorValue;
-
-  // text
-  TextCtlSubtle: ColorValue;
-  TextCtlSubtleHover: ColorValue;
-  TextCtlSubtlePressed: ColorValue;
-  TextCtlSubtleDisabled: ColorValue;
-
-  // stroke colors (typically borders, outlines or underlines)
-  StrokeCtlSubtle: ColorValue;
-  StrokeCtlSubtleHover: ColorValue;
-  StrokeCtlSubtlePressed: ColorValue;
-  StrokeCtlSubtleDisabled: ColorValue;
-  StrokeCtlSubtleKeyboard: ColorValue;
-
-  // standalone stroke colors
-  StrokeOnlyHover: ColorValue;
-  StrokeOnlyPressed: ColorValue;
-  StrokeOnlySelected: ColorValue;
-
-  /**
-   * Hyperlinks
-   */
-  TextHyperlink: ColorValue;
-  TextHyperlinkHover: ColorValue;
-  TextHyperlinkPressed: ColorValue;
-
-  /**
-   * Active Text
-   *
-   * Text only states, with no background change, such as a pivot control.
-   */
-  TextActive: ColorValue;
-  TextActiveHover: ColorValue;
-  TextActivePressed: ColorValue;
-  TextActiveSelected: ColorValue;
-
-  /**
-   * Errors
-   */
-  TextError: ColorValue;
-  TextErrorHover: ColorValue;
-  TextErrorPressed: ColorValue;
-  TextErrorSelected: ColorValue;
-
-  /**
-   * Accents
-   *
-   * Used to emphasize or create boundaries around/within UI.
-   */
-
-  // Used for general borders
-  AccentDark: ColorValue;
-
-  // Used for separator lines
-  AccentLight: ColorValue;
-
-  // Used for accent rectangles and bolder borders
-  AccentEmphasis: ColorValue;
-
-  // Used for borders that outline the entire UI region
-  AccentOutline: ColorValue;
-
-  // A subtle tint used to accent a region on top of Bkg
-  BkgAccentTint: ColorValue;
-
-  // A foreground color used for contrasting text on top of BkgAccentTint
-  TextAccentTint: ColorValue;
-
-  /**
-   * Headers
-   *
-   * Used for headings on sections of the user interface.
-   */
-  BkgHeader: ColorValue;
-  TextHeader: ColorValue;
-
-  /**
-   * Thumb toggle colors
-   */
-  ThumbToggleSwitchOff: ColorValue;
-  ThumbToggleSwitchOffHover: ColorValue;
-  ThumbToggleSwitchOffPressed: ColorValue;
-  ThumbToggleSwitchOffDisabled: ColorValue;
-  ThumbToggleSwitchOn: ColorValue;
-  ThumbToggleSwitchOnHover: ColorValue;
-  ThumbToggleSwitchOnPressed: ColorValue;
-  ThumbToggleSwitchOnDisabled: ColorValue;
-
-  /**
-   * Background values for toggle switches
-   */
-  BkgToggleSwitchOff: ColorValue;
-  BkgToggleSwitchOffHover: ColorValue;
-  BkgToggleSwitchOffPressed: ColorValue;
-  BkgToggleSwitchOffDisabled: ColorValue;
-  BkgToggleSwitchOn: ColorValue;
-  BkgToggleSwitchOnHover: ColorValue;
-  BkgToggleSwitchOnPressed: ColorValue;
-  BkgToggleSwitchOnDisabled: ColorValue;
-
-  /**
-   * Stroke values for toggle switches
-   */
-  StrokeToggleSwitchOff: ColorValue;
-  StrokeToggleSwitchOffHover: ColorValue;
-  StrokeToggleSwitchOffPressed: ColorValue;
-  StrokeToggleSwitchOffDisabled: ColorValue;
-  StrokeToggleSwitchOn: ColorValue;
-  StrokeToggleSwitchOnHover: ColorValue;
-  StrokeToggleSwitchOnPressed: ColorValue;
-  StrokeToggleSwitchOnDisabled: ColorValue;
-
-  /**
-   * Slider colors
-   */
-  SliderPrimary: ColorValue;
-  SliderPrimaryHover: ColorValue;
-  SliderPrimaryPressed: ColorValue;
-  SliderPrimaryDisabled: ColorValue;
-  SliderSecondary: ColorValue;
-  SliderBuffer: ColorValue;
-  SliderKeyboard: ColorValue;
-  SliderToolTipBorder: ColorValue;
-  SliderToolTipLabel: ColorValue;
-  SliderToolTipBkg: ColorValue;
-
-  /**
-   * Assorted other colors
-   */
-  TextEmphasis2: ColorValue;
-  BkgCtlSubtleSelected: ColorValue;
-  TextCtlSubtleSelected: ColorValue;
-  BkgCtlEmphasisFocus: ColorValue;
-  BkgCtlSubtleFocus: ColorValue;
-  BkgCtlSubtleHoverDisabled: ColorValue;
-  BkgCtlSubtleSelectedDisabled: ColorValue;
-  TextTextBoxPlaceholder: ColorValue;
-}