# Fluent Cards - Old
Primitives:
* Button
* Avatar
* Text
* Image
* Card
* Icon

### Button Tokens
* Size Variations: Small, Medium, Large
* Border
* Shadow
* Background
* Foreground
* Corner Radius

### Card Tokens
* Size Variations: Small, Medium, Large
* Background
* Corner Radius
* Shadow
* Border

[Design Tokens Progress Spreadsheet](https://microsoft-my.sharepoint-df.com/:x:/p/aneeshak/EcdlWHRAlZVEiyaJbJKnevcBgOg9SAY-QoRj2g1O4cHCFA?e=ST84cg)

**Status Week of June 8th:** Kay, Mak, Daisy, Aneesha
* Daisy & Kay to send updated Figma files for Button & Card. Current ones:
* [Button](https://www.figma.com/file/9GIgD17HTl6LZicfYGyUN7/Buttons-%5BFluentUi-Northstar%5D?node-id=1%3A2&viewport=883%2C624%2C0.10387499630451202/)
* [Tokens](https://www.figma.com/file/fBEvmvicrdjkB5ljK5nAaF/Tokens-(Working)?node-id=176%3A0&viewport=260%2C530%2C1)
* [Card](https://www.figma.com/file/berhUBA6mJV9sCPpjgfKRj/Card?node-id=974%3A1056&viewport=707%2C2086%2C0.20123659074306488)
* David [prototyped](https://github.com/microsoft/fluentui/pull/13416) design tokens in Button (and some in Avatar too)
* Mak is planning to extend David's work in Button to fully vet design tokens.
* Alicia to use Button as a starting point to vet design tokens in React Native.
* There aren't specs for Avatar, Text (more of a ramp), and Image yet. Aneesha needs to sync with Justin to get a timeline for when this engineering work will happen so design has a lead time to make the specs.
* Daisy and Sunmin are continuing to work on defining the overall design tokens system and gathering feedback from Levi, David, and other engineers as they iterate. They will share once it's more polished.

**Status Week of June 28th**
* Kay & Daisy working on organized format Button & Card spec with tokens
* Next steps: Kay - Image spec, Daisy oof - later: Layout tokens, make token charts more consumeable & visualize expected isual renderings.
* Card composite - Kay working with Mike Hill & Office: common card
* Avatar EntityLockup: thumbnail with few lines of text -> work for FileCards, People, Lists, Headers
* Mak used validated tokens interface and gotten into code values from Button spec - validated with Teams theme, Fluent theme
* small issue with Box shadow difference, focus rects not perfect
* Next steps: MenuButton, SplitButton, maybe Ghost then primitive Card (which is currently in northstar)
* Daisy - color tokens for button & primitive card, shadow tokens, type: ios and android align, layout: working with Levi & David Zakowski for padding & margin, turning border radius into tokens.
* Daisy also flushed out more of the Color, Shadow, and Type tokens: https://www.figma.com/files/588096576863690753/project/8475751/%F0%9F%8E%A8Theme-and-Tokens As Daisy and Sunmin iterate on these with David & Levi, these will be modified. The first page in each Figma is where tokens are being tracked. Daisy is looking to record a Loom video soon that has a walkthrough of the tokens to explain all this in more detail and share out.
* Card updated spec: Kay is reviewing with Angela & other folks before we can share widely like to Office Online.
* Kay getting updated tokens with Daisy into the current spec --> then it should be ready to be built as a converged primitive.

**Status week of July 1st**
* Aneesha:
* Sync with Rekha to discuss who'd be consuming the composite card first. Office Online. Path to integrate composite card into products - timeline.
* Mak:
* MenuButton validated with Fluent and Teams theme! Next: SplitButton
* 1 or 2 tab stops discussion today: 1 tab stop seems to be the general consensus but alt+down isn't unintuitive...
* Knob in storybook to switch between Fluent and Teams theme
* PR deploy
* Kay:
* Close to Image spec done next week. Review functional aspects, size ramp can be incorporated after
* Primitive Card & Button specs done through convergence so those are fine. Image, EntityGroup (Avatar lock up), Text, high value Card.
* Working with Mike Hill who's working with OXO - FileCard
* Plug in Teams scenarios to this composite card and see if it works - how many slots, simple template & more complicated template
* Replace older Fluent Web specs with lighter new ones and archive those.

**Status week of July 8th**
* Mak:
* PR deploy live
* SplitButton: 1 tab stop (pending change in that decision)
* Working on primitive Card in July - prototype following spec Kay made in 2-3 weeks
* Office Online: they provided draft Figma 2-3 scenarios Recommended Cards, AppGallery Cards. See if we can recreate one of these with prototype - as examples (won't change primitive Card spec)
* Kay:
* Updates current specs Button & Card with new design template
* Midway through Image spec
* Text, Icon, Avatar (repurpose one from v0 since it was done from Fluent + Stardust perspective), Flex/Stack (layout & sizing tokens), EntityLockup
* Common Card framework: Teams & OXO scenarios, couple different templates provided out of box
* Daisy:
* EntityLockup: 30% finished using Kay's new spec template
* Need sync with engineers on template structuring
* Porting Avatar to new template

**Status week of July 16th**
* Kay:
* Image spec
* V1: clickable content doesn't exist in fabric or stardust
* Video walkthrough
* Daisy:
* Sunmin, Daisy had sync with David: organize Color scheme tokens (not global - middle layer) so that palette's more predictable when it goes lighter/etc, also another run on naming, they're going to start meeting biweekly huddle to iterate more closely between eng & design
* Avatar: Entity Lockup is the Avatar grouping but it'll be the Header slot of the Card 4 slot grouping so it can be more than just Persona, can be any UI elements
* Text ramp
* Mak:
* SplitButton validated with Fluent & Teams Theme validated and in PR deploy:
* Base Card
* OpenUI spec for Card - research
* Shift:
* Image: reviewing the spec, understanding combination of requirements of fabric & stardust - tried to prototype Polyfill usage and it works in scenarios in spec
* Adobe Spectrum: release React spectrum that's quite close to what we're doing.
* Aneesha:
* Design needs to know when specs need to be delivered: which will be picked up (Text, Icon, Avatar, EntityLockup) so they can be reviewed (scope creep)
* Composite card scenarios (templates) for Ignite timeframe -> workback schedule

** Status week of July 23rd **
* Daisy:
* Token Superset - long working session for Mobile folks
* sign off on schema from Windows
* Next: Entity Layout
* In code tokens mapping for Button
* Example of how to extract in code token schema
* Mak:
* Open UI research card spec
* SplitButton PR blocked on one tab stop or 2 tab stops
* Pulled from this work to do Ribbon demo
* Next: base Card PR
* package scaffolding for react-cards
* Kay:
* Image spec reviewed with Eng
* Next:
* video walkthrough of Card spec, mapping to tokens file
* Avatar or Text spec
* Shift:
* scaffolded react-image package with initial implementation of the spec
* Next: start implement remaining parts of Image spec.

*Other notes:*

High value card: what components to put inside, different size variations, content
Discussion in eng needed for where these higher value templates will reside - conclusion from discussion with Rekha & Mike Hill: templates will simply be examples so as to not be prescriptive and reduce burden of maintenance.

Teams already built V0 control they needed card sooner - design was done in the converged sprint. That primitive card is here: http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/13199/merge/react-northstar/components/card/definition

Differentiate always between:
* Basic primitive card with tokens for styling, sizing and layout variations and states
* A composite card that has primitives used with the card primitive - this we are currently working on

More notes...
* Scaffolded into its own package - converged button.
* Test in Teams scenarios with perf & bundle size improvements.
* Remaining teams, guidance for writing new code - codemod to replace import statements.
* Shared Card Composite Component that can be used in more than just Teams - OXO: FileCard. OfficeOnline possibly.
* States, interaction pieces, other functional pieces still being worked out but doesn't block from getting design tokens into code.
* What are the other experiences besides FileCard that we are working towards?
* Angela - controls stewardship - card def