### Word List: Q - (No specific entries provided) Source: https://acorn.firefox.com/latest/content/word-list/n-r-Z1EQFKD6 Placeholder for terms starting with 'Q'. No specific style guidance was found in the provided text for this letter. ```APIDOC Term: (No entries for Q) Description: No specific word usage or capitalization guidelines were provided for terms starting with 'Q' in the given content. ``` -------------------------------- ### Firefox Desktop Design Token Mapping Example Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Illustrates how component-specific design tokens map to broader application and base tokens, ultimately pointing to raw CSS values. This example uses tokens related to the Firefox toggle component. ```APIDOC FirefoxDesignTokens: ComponentTokenMapping: - Component token: --toggle-large Application token: n/a Base token: --size-item-large Raw value: 32px - Component token: --toggle-background-color-pressed Application token: --color-accent-primary Base token: --color-blue-60 Raw value: oklch(55% 0.24 260) - Component token: --toggle-border-radius Application token: n/a Base token: --border-radius-circle Raw value: 9999px Description: "Variables that capture UI styling decisions, such as color or font size, using a consistent naming structure to convey purpose and intent. Design tokens are language-agnostic and can be translated to any environment. On Firefox for desktop, variables are represented in CSS." ``` -------------------------------- ### CSS Design Token Examples: Item Sizing Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Illustrates the definition of small and large sizing tokens for UI items, categorized under 'item' for specific element dimensions. ```css /* tokens-shared.css */ --size-item-small: 16px; --size-item-large: 32px; ``` -------------------------------- ### CSS Design Token Example: Interactive Element Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Demonstrates the use of a CSS variable for an interactive element's border color, referencing a shared design token for interactive states. ```css /* moz-toggle.css */ --toggle-border-color: var(--border-color-interactive); ``` -------------------------------- ### CSS Token Re-mapping: Brand Accent Color Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Demonstrates how the `--color-accent-primary` token is re-mapped in `tokens-brand.css` for brand-specific contexts, such as in-content pages. This example shows a specific color assignment for brand contexts. ```css /* tokens-brand.css */ --color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30)); ``` -------------------------------- ### CSS Token Re-mapping: Platform Accent Color Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Shows how the `--color-accent-primary` token is re-mapped in `tokens-platform.css` for platform-specific contexts, like the browser chrome. This example references an operating system-defined accent color. ```css /* tokens-platform.css */ --color-accent-primary: AccentColor; ``` -------------------------------- ### Word List: P - People, Phone, Picture-in-Picture, Pin to Taskbar, Pop-up, Plugin, Primary Browser, Primary Password, Private Browsing, Private Tab, Private Window Source: https://acorn.firefox.com/latest/content/word-list/n-r-Z1EQFKD6 Details the correct usage and capitalization for a range of terms starting with 'P', covering user terminology, UI elements, actions, and privacy features, with cross-references and specific formatting requirements. ```APIDOC Term: people Description: Prefer to refer to product users as "people," not "users," to humanize the audience. Avoid the impersonal term "users" within the product. Do not use "customers." Term: phone Description: See "mobile device" for related guidance. Term: Picture-in-Picture Description: Always capitalized with dashes. Internal abbreviation is PiP; do not use PiP in product UI or copy. Term: pin to taskbar Description: On Windows devices, applications can be pinned to the taskbar. Always sentence case 'taskbar.' The MacOS equivalent is "add to or keep in Dock." Term: pop-up / pop up Description: Use *pop-up* for adjectives and nouns. Use *pop up* (space and no hyphen) for verbs. Term: plugin / plugins Description: Unless referring to physically plugging something in, use one word, lowercase, for software components like Flash and QuickTime. Term: primary browser Description: Refers to Firefox becoming the default browser and being pinned to the taskbar (Windows) or kept in the Dock (MacOS). Used in onboarding and modal messaging. Term: Primary Password Description: The password that unlocks locally saved passwords in Firefox. Formerly called Master Password. The term "master" has been retired due to its racist connotation. Term: private browsing Description: Always sentence case. Avoid "Private Browsing Mode" or "Private Browsing Sessions." Instead, use phrases like "while using private browsing in a private window." Term: private tab Description: Use for mobile only. Follow device guidance for capitalization. Do not use on desktop, as the window is the atomic unit of private browsing. Term: private window Description: Always sentence case. ``` -------------------------------- ### Define Color Scale Tokens (CSS) Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Defines a scale of color tokens, starting with a base value and progressing through shades. These tokens are typically organized alphabetically within a 'Color' group in CSS files. ```css /** Color **/ --color-blue-0: oklch(97% 0.05 260); --color-blue-10: oklch(90% 0.13 260); --color-blue-20: oklch(83% 0.17 260); ... ``` -------------------------------- ### Desktop Component Library Documentation Source: https://acorn.firefox.com/latest/resources/developer-MjYKs2SN Link to the Storybook instance for the Firefox desktop component library, providing technical documentation and previews. ```APIDOC Storybook Documentation: Description: Library for desktop design system components and technical documentation. URL: https://firefoxux.github.io/firefox-desktop-components/?path=/docs/docs-lit-guide--docs Notes: Best previewed on Firefox. Requires enabling specific about:config preferences (svg.context-properties.content.enabled, layout.css.light-dark.enabled). ``` -------------------------------- ### iOS Component Library Documentation Source: https://acorn.firefox.com/latest/resources/developer-MjYKs2SN Link to the hosted documentation for the Firefox iOS component library. ```APIDOC Component Library Documentation: Description: Documentation for the iOS component library. URL: https://mozilla-mobile.github.io/firefox-ios/documentation/componentlibrary ``` -------------------------------- ### Acorn Toggle Writing Guidelines Source: https://acorn.firefox.com/latest/components/toggle-switch/i-os-hUyAgQGy Provides guidelines for writing text associated with the Acorn Toggle component, emphasizing adherence to Apple's Human Interface Guidelines for capitalization. ```APIDOC Writing Guidelines for Acorn Toggle: - Follow Apple Human Interface Guidelines (HIG). - Use headline-style capitalization: Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters. ``` -------------------------------- ### Storybook UI Documentation Link Source: https://acorn.firefox.com/latest/styles/desktop-color/desktop-14S4X1uo Provides a link to the Storybook instance for the Acorn design system. This resource allows developers to explore UI components and understand how design tokens are implemented. ```html Storybook UI docs for devs ``` -------------------------------- ### CSS Token Definition: Shared Border Radius Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Provides an example of a shared design token, `--border-radius-small`, defined in `tokens-shared.css`. This token is used by both the browser chrome and in-content pages for consistent styling. ```css /* tokens-shared.css */ --border-radius-small: 4px; ``` -------------------------------- ### Mobile Component Libraries Source: https://acorn.firefox.com/latest/resources/developer-MjYKs2SN Links to the GitHub repositories for the Android and iOS mobile component libraries. ```APIDOC Android Component Library: Description: Component library for Android. Repository: https://github.com/mozilla-mobile/firefox-android/tree/main/fenix/app/src/main/java/org/mozilla/fenix/compose iOS Component Library: Description: Component library for iOS. Repository: https://github.com/mozilla-mobile/firefox-ios/tree/main/BrowserKit/Sources/ComponentLibrary ``` -------------------------------- ### Word List: O - OK, Open, Open Web Source: https://acorn.firefox.com/latest/content/word-list/n-r-Z1EQFKD6 Provides guidelines for the terms 'OK', 'open', and 'open web', including preferred forms, avoidance of certain characters or phrases, and specific capitalization rules for movements. ```APIDOC Term: OK Description: Use instead of "O.K." or "Okay." Avoid: OK hand emoji (πŸ‘Œ) due to its association with white supremacy. Term: open / open web Description: As the web is open by its very nature, there is no need to make the distinction; avoid where possible. When specifically and intentionally referring to the Open Web movement, please capitalize 'Open Web'. ``` -------------------------------- ### Inclusive Writing: Problematic Terms and Alternatives Source: https://acorn.firefox.com/latest/content/inclusive-writing/writing-guidance-hSvdb7Dx This section provides a reference for commonly used problematic terms and their recommended inclusive alternatives. It includes explanations for why certain terms are deprecated and offers guidance for clearer, more respectful communication. ```APIDOC ProblematicTerms: - problematic: "Master password" preferred: "Primary password" explanation: "Master-slave is a racist metaphor that perpetuates white supremacy. We have no need for terms derived from harmful metaphors when we have plenty of alternatives that are more inclusive and more descriptive. Learn more about why we deprecated this term in Firefox." - problematic: "blacklist/whitelist" preferred: "block list/allow list" explanation: "Embedding the concept that white equals good or black/dark equals bad assigns value to physical features. Avoid the metaphorical use of white-black to connote good-evil." - problematic: "Dark pattern" preferred: "Deceptive design pattern" explanation: "Embedding the concept that white equals good or black/dark equals bad assigns value to physical features. Avoid the metaphorical use of white-black to connote good-evil. Learn more about deceptive design patterns." - problematic: "Native feature" preferred: "Built-in feature, core feature, default feature" explanation: "β€˜Native’ can have negative connotations for some people. It is a general, overarching term that does not account for any distinctiveness between various groups." - problematic: "Guys" preferred: "Folks, everybody, everyone, all" explanation: "Using β€˜guys’ for a group can be exclusionary. Use one of the suggested indefinite pronouns instead." - problematic: "Dumb, lame, stupid" preferred: "(No direct replacement, focus on descriptive terms)" explanation: "These terms reinforce negative connotations around disabilities." - problematic: "crazy (e.g. Crazy 8s), sanity check, insane, PTSD" preferred: "Instead of Crazy 8s, to describe the design brainstorming exercise, you could call it 8 Ups." explanation: "These terms continue to stigmatize mental health conditions." ``` -------------------------------- ### Word List: N - New Tab, New Window, Non-Private Tab, Non-Profit Source: https://acorn.firefox.com/latest/content/word-list/n-r-Z1EQFKD6 Defines the correct usage and capitalization for terms starting with 'N', including specific guidance for mobile vs. desktop contexts and preferred hyphenation. ```APIDOC Term: New Tab Description: Always capitalized. The default Firefox start page unless a different home page is set. Term: New Window Description: Always capitalized. Term: non-private tab Description: Use only on mobile when contrasting with a private tab. For example, on Android, the β€œMove to non-private tab” feature moves a private tab out of private browsing. Term: non-profit Description: Prefer the hyphenated form ('non-profit') over the single word ('nonprofit'). ``` -------------------------------- ### WCAG 2.2 Guideline: Enough Time Source: https://acorn.firefox.com/latest/patterns/motion-ab7Va9lJ Ensures users have sufficient time to read and interact with content, particularly concerning time-based media and auto-updating information. ```APIDOC WCAG_2_2_Enough_Time: Guideline: 2.2 Enough Time Description: Provide users enough time to read and use content. SuccessCriteria: - SC_2_2_2_Pause_Stop_Hide: Title: Pause, stop, hide Description: For moving, blinking, scrolling, or auto-updating information that starts automatically and lasts more than five seconds, there must be a mechanism for the user to pause, stop, or hide it, unless the movement is essential. For auto-updating information, the same applies, or the user must be able to control the frequency of the update, unless essential. Parameters: - Type: Moving, blinking, scrolling information Condition: Starts automatically, lasts > 5 seconds, presented in parallel with other content Requirement: User mechanism to pause, stop, or hide (unless essential) - Type: Auto-updating information Condition: Starts automatically, presented in parallel with other content Requirement: User mechanism to pause, stop, or hide, OR control update frequency (unless essential) ``` -------------------------------- ### Define Font Size Scale Tokens (CSS) Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Defines a scale of font size tokens, starting with a root size and then defining relative or absolute sizes for various text elements. Semantic tokens like `--font-size-root` can precede the scale. ```css /** Font size **/ --font-size-root: 15px; --font-size-small: 0.867rem; /* 13px */ --font-size-large: 1.133rem; /* 17px */ --font-size-xlarge: 1.467rem; /* 22px */ --font-size-xxlarge: 2.2rem; /* 33px */ ``` -------------------------------- ### Acorn Design System Icon Usage Guidelines Source: https://acorn.firefox.com/latest/styles/typography/desktop-INLN1aHE Provides guidance on using icons in desktop UI design, emphasizing text-based labels over icons alone for clarity, especially in menus and buttons. It details 'Do' and 'Don't' scenarios and lists common exceptions where icons can be used alongside text. ```APIDOC IconUsage: Purpose: Enhance UI clarity and user experience. Guidelines: - Desktop UI: Avoid placing icons alongside text in menus and buttons to emphasize meaning. - Preferred: Use descriptive text labels to communicate function. - Alternative: Icon buttons can be used, but ensure they are not confusing. CommonExceptions: - Favicons: Next to website names. - Warning Icons: Next to captions for errors or problems. - Distinguishing Text: When color is the only other signifier. Recommendation: Consult with the design team if both text and icons are deemed beneficial for an item. ``` -------------------------------- ### Firefox Design Token Folder Structure Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Illustrates the directory layout for design tokens within the Firefox project. It highlights the location of shared, brand, and platform-specific token files in the toolkit/themes/shared/design-system folder. ```text └── themes └── shared └── design-system β”œβ”€β”€ design-tokens.json β”œβ”€β”€ tokens-brand.css β”œβ”€β”€ tokens-platform.css └── tokens-shared.css ``` -------------------------------- ### Mobile Design Tokens (Colors/Themes) Source: https://acorn.firefox.com/latest/resources/developer-MjYKs2SN References to design token implementations for colors and themes on Android and iOS platforms. ```APIDOC Android Colors: Description: Color design tokens for Android. Location: https://github.com/mozilla-mobile/firefox-android/tree/main/fenix/app/src/main/java/org/mozilla/fenix/theme iOS Colors: Description: Color design tokens for iOS. Location: https://github.com/mozilla-mobile/firefox-ios/blob/main/BrowserKit/Sources/Common/Theming/FxColors.swift iOS Light Theme: Description: Implementation of the light theme for iOS. Location: https://github.com/mozilla-mobile/firefox-ios/blob/main/BrowserKit/Sources/Common/Theming/LightTheme.swift iOS Dark Theme: Description: Implementation of the dark theme for iOS. Location: https://github.com/mozilla-mobile/firefox-ios/blob/main/BrowserKit/Sources/Common/Theming/DarkTheme.swift iOS Private Mode Theme: Description: Implementation of the private mode theme for iOS. Location: https://github.com/mozilla-mobile/firefox-ios/blob/main/BrowserKit/Sources/Common/Theming/PrivateModeTheme.swift ``` -------------------------------- ### Desktop Design Tokens (CSS) Source: https://acorn.firefox.com/latest/resources/developer-MjYKs2SN References to CSS files containing shared, brand, and platform design tokens used across Firefox desktop. ```APIDOC Shared Tokens: Description: Tokens shared across all of Firefox. Location: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-shared.css Brand Tokens: Description: Tokens used on in-content features. Location: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-brand.css Platform Tokens: Description: Tokens used on chrome features. Location: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-platform.css ``` -------------------------------- ### Acorn Background Colors by Platform Source: https://acorn.firefox.com/latest/styles/color-MZHBVuZc Details the background color definitions for different layers across mobile platforms (iOS, Android) and their usage contexts. Includes light and dark mode values and platform-specific naming conventions. ```APIDOC Background Layer 1: Light Mode: #f9f9fb Dark Mode: #2b2a33 iOS Name: Layer1 Android Name: fx_mobile_layer_color_1 Description: Primary background color for page and overlay contexts. Background Layer 2: Light Mode: #ffffff Dark Mode: #42414d iOS Name: Layer2 Android Name: fx_mobile_layer_color_2 Description: Secondary background color for UI elements. Background Layer 3: Light Mode: #f0f0f4 Dark Mode: #1c1b22 iOS Name: Layer3 Android Name: fx_mobile_layer_color_3 Description: Tertiary background color for UI elements. ``` -------------------------------- ### Acorn Toggle Component States and Variants Source: https://acorn.firefox.com/latest/components/toggle-switch/i-os-hUyAgQGy Details the available states and variants for the Acorn Toggle component on iOS. This includes interactive states like enabled and disabled, and considerations for different modes (themes). ```APIDOC Toggle Component Variants & States (iOS): Sizes: - Acorn does not offer specific sizing variants for iOS toggles. States: - Binary Switch State: On or Off. - Interactive States: - Enabled: The toggle is fully functional and interactive. - Disabled: The toggle is unusable. Visual styles are applied to indicate it's disabled, preventing user interaction until conditions are met. Modes (Themes): - Supports 2 modes (e.g., Light mode, Dark mode). Examples: - Enabled (Light Mode): (Visual representation of an enabled toggle in light mode) - Disabled (Light Mode): (Visual representation of a disabled toggle in light mode) - Enabled (Dark Mode): (Visual representation of an enabled toggle in dark mode) - Disabled (Dark Mode): (Visual representation of a disabled toggle in dark mode) ``` -------------------------------- ### Acorn Design System Typography Tokens - Windows Source: https://acorn.firefox.com/latest/styles/typography/desktop-INLN1aHE Defines typography styles and tokens for Windows platforms, specifying font families, sizes, weights, and usage contexts for headings, body text, and links across different UI areas like 'about:pages', New Tab, and modals. ```APIDOC TypographyTokens_Windows: Note: These tokens are currently applicable to Figma designs and not yet implemented in Firefox for desktop. Categories: In-content: Font_Heading: - Font: Segoe UI Regular 22px/140% Usage: Used for headings in about:pages. (h1) - Font: Segoe UI Semibold 17px/140% Usage: Used for headings in New Tab, subheadings about:pages, and bold text in onboarding modals. (h2) Font_Title: - Font: Segoe UI Light 26px/140% Usage: Used for title heading in error pages. Font_Body: - Font: Segoe UI Semibold 15px/150% Usage: Used for bold text in about:pages. - Font: Segoe UI Regular 15px/150% Usage: Used for text (paragraph) about:pages. - Font: Segoe UI Regular 15px/150%, underline Usage: Used for text (link) in about:pages. - Font: Segoe UI Semibold 13px/150% Usage: Used for bold text (paragraph) in New Tab. - Font: Segoe UI Regular 13px/150%, underline Usage: Used for text (link) in New Tab. - Font: Segoe UI Regular 13px/150% Usage: Used for text link in New Tab. Chrome: Font_Body: - Font: Segoe UI Regular 14px/150% Usage: Used for text (paragraph) in modals, panels, menus, and inputs. - Font: Segoe UI Regular 14px/150%, underline Usage: Used for text (link) in modals, panels, and menus. - Font: Segoe UI Semibold 12px/150% Usage: Used for bold text in infobar and menu notifications. - Font: Segoe UI Regular 12px/150% Usage: Used for text (paragraph) in infobar and menu notifications. - Font: Segoe UI Regular 12px/150%, underline Usage: Used for text link in infobar and menu notifications. - Font: Segoe UI Regular 9px/150%, uppercase Usage: Used for meta text in tabs. Font_Heading: - Font: Segoe UI Semibold 14px/150% Usage: Used for headings in modals, panels, and menus. (h1) ``` -------------------------------- ### Acorn/Firefox Motion Design Principles Source: https://acorn.firefox.com/latest/patterns/motion-ab7Va9lJ Key principles for motion and animation design, emphasizing user experience and personality as defined by the UX team. ```APIDOC MotionDesignPrinciples: - Principle: Quick Description: Animations should be fast and nimble, prioritizing user perceived performance over technical benchmarks. - Principle: Informative Description: Motion should aid the flow of actions, giving clear guidance for user orientation (spatial or temporal). - Principle: Whimsical Description: Incorporate playful elements as part of Firefox’s personality. ``` -------------------------------- ### Button Writing Guidelines Source: https://acorn.firefox.com/latest/components/button/i-os-TWW7xym3 Guidelines for button text capitalization, following Apple Human Interface Guidelines. ```APIDOC Writing Guidelines: Capitalization: Follow Apple Human Interface Guidelines (Headline-style capitalization). Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters. Reference: - Acorn Capitalization: /latest/content/capitalization-4nEWdMUM ``` -------------------------------- ### Button Changelog Source: https://acorn.firefox.com/latest/components/button/i-os-TWW7xym3 Records changes and version updates for the Acorn Button component guidance. ```APIDOC Changelog: | Date | Version | Notes | |------------|---------|--------------------| | Apr 17, 2025 | 2.0.0 | Simplified template | | Feb 15, 2023 | 1.0.0 | Initial draft | ``` -------------------------------- ### Base Design Tokens: Blue Color Palette Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/overview-YYp6MVjt Defines foundational design tokens for the blue color palette in `tokens-shared.css`. These base tokens represent hard-coded values and can be referenced to create more meaningful design tokens. ```css /* tokens-shared.css */ --color-blue-50: oklch(62% 0.24 260); --color-blue-60: oklch(55% 0.24 260); --color-blue-70: oklch(48% 0.2 260); ``` -------------------------------- ### WCAG 2.3 Guideline: Seizures and Physical Reactions Source: https://acorn.firefox.com/latest/patterns/motion-ab7Va9lJ Prevents content from causing seizures or physical reactions by limiting flashing and controlling animation triggered by user interactions. ```APIDOC WCAG_2_3_Seizures_Physical_Reactions: Guideline: 2.3 Seizures and Physical Reactions Description: Do not design content in a way that is known to cause seizures or physical reactions. SuccessCriteria: - SC_2_3_1_Three_Flashes_Below_Threshold: Title: Three Flashes or Below Threshold Description: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. Parameters: - Type: Flashing content Condition: Flashes > 3 times per second Requirement: Must not occur, or flash intensity must be below defined thresholds. - SC_2_3_3_Animation_From_Interactions: Title: Animation from interactions Description: Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. Parameters: - Type: Motion animation triggered by interaction Requirement: User mechanism to disable animation (unless essential to functionality or information) ``` -------------------------------- ### Acorn Button Component Specification Source: https://acorn.firefox.com/latest/components/button/android-dzMuCmlW Defines the properties and types available for the Acorn Button component on Android. This specification details configurable aspects and visual variations. ```APIDOC Button Component Specification: Description: An interactive visual element that indicates an available action for the user. Usage Guidance: Reference Material Design for general guidance when designing for Android. Properties: | Property | Values | Default | | --- | --- | --- | | Icon Variant | True | False | | Type Variant | Primary | Secondary | Tertiary | Destructive | Primary | | State Variant | Default | Disabled | Default | Size: Acorn currently offers one size for Android buttons. Types: - Primary: Available in Light mode and Dark mode. - Secondary: Available in Light mode and Dark mode. - Tertiary: Available in Light mode and Dark mode. External References: - Figma: https://www.figma.com/design/ujdiReypSypu2GhRgzArea/Android-Components?m=auto&node-id=1202-53176&t=n7JuskjHWRMzFgCq-1 - Mozilla Central: https://searchfox.org/mozilla-central/source/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/Button.kt - Material Design: https://m3.material.io/components/buttons/overview ``` -------------------------------- ### Button Accessibility Source: https://acorn.firefox.com/latest/components/button/i-os-TWW7xym3 Notes on accessibility for the iOS Button component, directing users to Slack for assistance. ```APIDOC Accessibility: Guidance: No iOS specific guidance provided by Acorn. Support: Check with [#accessibility](https://mozilla.enterprise.slack.com/archives/C4E0W8B8E) in Slack for help. ``` -------------------------------- ### Button Properties and Variants Source: https://acorn.firefox.com/latest/components/button/i-os-TWW7xym3 Defines the configurable properties and visual variants for the Acorn Button component, including type and state variations. ```APIDOC Button Component Properties: Properties: Type Variant: Values: Primary, Secondary Default: Primary State Variant: Values: Disabled, Default, Hover Default: Default Size: Acorn currently offers one size for iOS buttons. ``` -------------------------------- ### Firefox about:config setting for prefers-reduced-motion Source: https://acorn.firefox.com/latest/patterns/motion-ab7Va9lJ This entry details the specific configuration preference within Firefox's about:config that allows users to control their preference for reduced motion. It explains the preference name, its type, and the meaning of its possible values. ```APIDOC Firefox Preference: ui.prefersReducedMotion Description: Controls the user's preference for reduced motion in Firefox. When set, Firefox will attempt to honor the prefers-reduced-motion CSS media query based on this setting. Type: Number Values: 0: Full animation is enabled (default behavior if the preference is not set). 1: Reduced motion is preferred. Animations will be minimized or disabled where possible. Usage: Add a number preference named 'ui.prefersReducedMotion' in about:config. Set its value to 0 or 1. Changes take effect immediately. Related Settings: This setting directly influences how Firefox renders web content that uses the prefers-reduced-motion CSS media feature. ``` -------------------------------- ### Acorn Design System Typography Tokens - macOS Source: https://acorn.firefox.com/latest/styles/typography/desktop-INLN1aHE Defines typography styles and tokens for macOS platforms, specifying font families, sizes, weights, and usage contexts for headings, body text, and links across different UI areas like 'about:pages', New Tab, and modals. ```APIDOC TypographyTokens_macOS: Categories: In-content: Font_Heading: - Font: SF Pro Text Regular 22px/140% Usage: Used for headings in about:pages. (h1) - Font: SF Pro Text Semibold 17px/140% Usage: Used for headings in New Tab, subheadings about:pages, and bold text in onboarding modals. (h2) Font_Body: - Font: SF Pro Text Semibold 15px/150% Usage: Used for bold text in about:pages. - Font: SF Pro Text Regular 15px/150% Usage: Used for text (paragraph) in about:pages. - Font: SF Pro Text Regular 15px/150%, underline Usage: Used for text (link) in about:pages. - Font: SF Pro Text Semibold 13px/150% Usage: Used for bold text (paragraph) in New Tab. - Font: SF Pro Text Regular 13px/150% Usage: Used for text in New Tab. - Font: SF Pro Text Regular 13px/150%, underline Usage: Used for text (link) in New Tab. Font_Title: - Font: SF Pro Text Light 26px/140% Usage: Used for title heading in error pages. Chrome: Font_Heading: - Font: SF Pro Text Semibold 13px/150% Usage: Used for headings in modals, panels, and menus. (h1) Font_Body: - Font: SF Pro Text Semibold 13px/150% Usage: Used for bold text in buttons, and bold text in modals, panels, and menus. - Font: SF Pro Text Regular 13px/150% Usage: Used for text (paragraph) in modals, panels, menus, and inputs. - Font: SF Pro Text Semibold 11px/150% Usage: Used for bold text in Infobar and menu notifications. - Font: SF Pro Text Regular 11px/150% Usage: Used for text (paragraph) in infobar and menu notifications. - Font: SF Pro Text Regular 11px/150%, underline Usage: Used for text (link) in infobar and menu notifications. - Font: SF Pro Text Regular 8.2px/150%, uppercase Usage: Used for meta text in tabs. ``` -------------------------------- ### Acorn Design System Desktop Design Tokens - Text and States Source: https://acorn.firefox.com/latest/styles/desktop-design-tokens/text-NmkRjHlh-NmkRjHlh Defines text-related design tokens and associated states like 'error', 'critical', 'deemphasized', and 'disabled' for desktop use within the Acorn Design System. ```APIDOC Desktop Design Tokens - Text States: error: Critical deemphasized: Secondary disabled: High Contrast Mode (Windows 11 Desert/Night Sky): error: Critical deemphasized: Secondary disabled: ``` -------------------------------- ### Acorn UI Keyboard Shortcuts Source: https://acorn.firefox.com/latest/help-and-support/office-hours-UePgrNIe Common keyboard shortcuts for navigating and interacting with the Acorn Design System interface, such as initiating search or clearing the current view. ```UI Commands Cmd/Ctrl + K: Initiate search ESC: Clear current view or exit ``` -------------------------------- ### Acorn Toggle Component Anatomy Source: https://acorn.firefox.com/latest/components/toggle-switch/i-os-hUyAgQGy Defines the key parts and their properties that constitute the Acorn Toggle component for iOS. This helps in understanding the structure and design elements. ```APIDOC Toggle Component Anatomy: Key | Category | Parts ---|---|--- 1 | Shape, Thumb | Background color, border radius 2 | Shape, Track | Border radius, border color 3 | Shape, Track | Background color, padding (block [top, bottom], inline [left, right]) ``` -------------------------------- ### Acorn Accent Colors by Platform Source: https://acorn.firefox.com/latest/styles/color-MZHBVuZc Defines the primary accent colors used across different platforms (Desktop, iOS, Android) for UI elements like buttons and links. Includes light and dark mode values and platform-specific naming conventions. ```APIDOC Desktop Accent Color: CSS Variable: --in-content-accent-color Value (Light Mode): #0061e0 Description: Primary brand accent color for recurring UI elements. iOS Accent Colors: Light Mode: #0060df Dark Mode: #00b3f4 iOS Name: ActionPrimary Description: Primary brand accent color for iOS UI elements. Android Accent Colors: Light Mode: #312a64 Dark Mode: #7542e4 Android Name: fx_mobile_action_color_primary Description: Primary brand accent color for Android UI elements. ```