Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Color] Update Color System & Add Design Guide/ Color #84

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

[Color] Update Color System & Add Design Guide/ Color #84

wants to merge 6 commits into from

Conversation

Sanlorng
Copy link
Collaborator

  1. Add Design Guide/ColorScreen.
  2. Aliging some color name with Design Toolkit.
  3. Update color system values.
  4. Add ColorOnImageFill Colors.
  5. Add FocusBorder Stroke.
    image
    image
    image
    image
    image

@Sanlorng
[gallery & fluent] Add ColorScreen and aligning some color names wi…
d7b5232 
…th the Design Toolkit.

1. Add ColorScreen that show the usages of fluent design color system.
2. Aligning some color names with the Design Toolkit.
@Sanlorng
[fluent] feat: Update ColorScreen section headers
cd6e766 
This commit updates the section headers in the ColorScreen to improve clarity and organization.

The following sections have been renamed:
- "Control Fill" is now "Control"
- "Control Alt Fill" is now "Control Alt"
- "Neutral Solid" is now "Control Solid"
- "Neutral Strong" is now "Control Strong"
- "Subtle Fill" is now "Subtle"
- "Accent Fill" is now "Accent"

Additionally, the ColorSection composable now accepts an optional `header` parameter to override the section name in the UI. This allows for more flexibility in customizing the display of color groups.
@Sanlorng
[fluent] Adjust Fluent theme colors
03c3bb6 
This commit adjusts various Fluent theme colors, including:

- Modifying text color values for secondary and tertiary elements in dark mode.
- Updating the onAccent color compound for secondary elements in dark mode.
- Adjusting control color values for default, secondary, tertiary, and disabled states in both dark and light modes.
- Changing subtle fill color values for secondary and tertiary elements in dark mode.
- Updating background color values for layer, layerOnMicaBaseAlt, and smoke elements in dark mode.
- Modifying border color values and gradients for control, accentControl, circle, textControl, and textControlFocused elements in both dark and light modes.
@Sanlorng
[fluent] Refactor: Use FluentTheme.colors.borders for elevation shadow
407c1aa 
This commit refactors elevation shadow to use `FluentTheme.colors.borders` instead of hardcoded colors.

It also introduces `strokeShadow` parameter to `elevation` modifier, which allows to customize the shadow color.

For `CircleShape`, the shadow color is set to `FluentTheme.colors.borders.circle`, and for other shapes, it's set to `FluentTheme.colors.borders.control`.

Additionally, the `backgroundSizing` parameter in `Layer` is now optional and defaults to `BackgroundSizing.OuterBorderEdge`.
@Sanlorng
[fluent] feat: Add color on image fill
c55d2dc 
This commit introduces a new color category, `controlOnImage`, to the Fluent Design System colors.

This category is used for controls that appear on top of imagery and includes default, secondary, tertiary, and disabled states.

The `controlOnImage` colors provide better contrast and visual hierarchy when controls are placed over images.
@Sanlorng
[fluent] feat: Implement focus stroke colors
28ad7eb 
This commit introduces focus stroke colors to the Fluent theme.

It adds two new color properties to the `Stroke` data class:

- `outer`: Represents the outer stroke color used for focus indicators.
- `inner`: Represents the inner stroke color used for focus indicators.

These color properties provide a visual indication of focus for interactive elements within the Fluent design system. They are intended to be used for components like buttons, input fields, and other interactive elements that require visual focus feedback.

The commit also updates the `FluentTheme` object with default values for these new colors, ensuring that focus stroke is applied consistently across the Fluent UI.
@Sanlorng Sanlorng requested a review from Konyaco November 17, 2024 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Konyaco Konyaco Awaiting requested review from Konyaco

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Sanlorng