PR9: feat(v9): dense flat buttons, observability colors, remove XS size#1706
Open
anirudha wants to merge 17 commits intoopensearch-project:mainfrom
Open
PR9: feat(v9): dense flat buttons, observability colors, remove XS size#1706anirudha wants to merge 17 commits intoopensearch-project:mainfrom
anirudha wants to merge 17 commits intoopensearch-project:mainfrom
Conversation
Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
- Change primary font from 'Rubik' to 'Noto Sans' with sans-serif fallbacks - Change code font from 'Source Code Pro' to 'Roboto Mono' with monospace fallbacks - Changes isolated to v9 theme only; other themes unaffected Signed-off-by: Kiro Agent <kiro@amazon.com>
…d docs - Add 6-level shadow token system ($ouiShadow1-6) with configurable opacity - Add ouiElevation, ouiLocalElevation, ouiElevatedSurface SASS mixins - Add dark theme shadow opacity override (0.80) and elevated surface CSS custom properties - Add useElevation React hook and OuiElevationProvider for dynamic z-index management - Add elevation documentation page with shadow levels, dark theme, hook, and local elevation demos - Add unit tests for elevation hook and provider Signed-off-by: Kiro Agent <kiro@amazon.com>
… size - Shift v9 dark palette from blue-tinted Slate to neutral Zinc grays - Add layered depth: page (Zinc-950) → cards (Zinc-900) → elevated (Zinc-800) - Add light glow ring to shadow levels for visible elevation in dark mode - Increase shadow spread and opacity for perceptible depth differentiation - Fix header dark background from navy (opensearch-project#1522) to neutral (#18181B) - Replace text-decoration underline hover with subtle background tint on buttons, button groups, and tabs - Add size='xs' (24px) extra-small button variant with OuiXSmallButton convenience component - Update button docs with xs size examples across all color variants Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
Deploys the built docs site to GitHub Pages on push to main and feature branches. Uses the official GitHub Pages actions. Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
Matches ruanyl/oui setup — builds docs and pushes to gh-pages branch. GitHub's built-in pages-build-deployment then serves it automatically. Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
- Side nav hover: 0.6 → 0.35 transparency, active: 0.3 → 0.15 - List group hover: 0.75 → 0.5 transparency - Focus background: 65% → 50% dark theme tint for stronger visibility - Context menu: replace underline hover with background tint Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
…nents Replace underline hover states with background color tints for a cleaner, more modern look. Underlines are preserved only on actual link components (OuiLink) and code syntax highlighting where they are semantically correct. Components updated: selectable, combo_box, accordion, badge, card, table, facet, filter_group, steps, list_group, context_menu, control_bar, image, date_picker, super_date_picker, file_picker, expression, pagination. Also updated global and oui-next theme hover/button mixins. Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
Add transparentize($ouiColorLightShade, .7) hover backgrounds to accordion, badge, card, combo_box, context_menu, control_bar, expression, facet, filter_group, steps, and table components. Also updated the global ouiHoverState mixin across all three themes (default, oui-next, v9). Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
…hlight Mouse clicks no longer leave a persistent blue background on selected tabs. The focus background now only appears during keyboard navigation. Signed-off-by: Anirudha Jadhav <anirudha@amazon.com>
- Add Principles section (About OUI, Design Philosophy) - Add Foundations section (Color, Typography, Spacing, Elevation, Icons) - Register new pages in routes.js navigation - Add sidebar divider with gradient fade at top/bottom edges - Hide sidebar scrollbar with bottom fade-out mask for overflow hint - Preserve sidebar scroll position on page navigation - Add top padding to page body for header spacing - Use scrollIntoView nearest for sidebar nav scroll behavior - Add .kiro specs for v9-design-system-docs and v9-scaffolding-colors
- Dense button sizing: Default 48→32px, Small 40→24px, XSmall removed - Flat shadcn-inspired button styling with neutral borders and no shadows on fill - Snappy 50ms hover transitions for instant feedback - Tighter border radii (8→6, 6→4, 12→10) - Observability-optimized visualization palette (Vis0-15) - Dark theme code block colors updated to match - Removed extra-small button examples from docs Signed-off-by: anirudha <anirudha@users.noreply.github.com>
anirudha
requested review from
AMoo-Miki,
Maosaic,
angle943,
ashwin-pc,
d-buckner,
ruanyl,
ruchidh and
virajsanghvi
as code owners
anirudha
changed the title
…ocs trigger Signed-off-by: anirudha <anirudha@users.noreply.github.com>
anirudha
force-pushed
the
v9-theme-colors-buttons
branch
from
a0099ed to
994296f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
V9 Theme: Dense Buttons, Flat Styling & Observability Colors
Branch:
v9-theme-colors-buttons→theme-updateSummary
Modernizes the V9 theme buttons to be denser and flatter (shadcn/ui-inspired), updates the visualization palette for observability use cases, and removes the extra-small button size.
Changes
1. Dense Button Sizing (
_buttons.scss)$ouiSizeXXL→$ouiSizeXL)$ouiSizeXL→$ouiSizeL)ease-outfor near-instant feedback2. Flat Button Styling — NEW (
_button.scss)$ouiBorderColorborder + subtle shadow (opacity .04), hover bumps to .063. Tighter Border Radii (
_borders.scss)4. Observability Visualization Palette (
_colors.scss)Updated
$ouiPaletteColorBlind(Vis0–Vis15) for monitoring/SRE dashboards:#10B981#3B82F6#F59E0B#EF4444#8B5CF6#06B6D4#EC4899#F97316#14B8A6#6366F1#94A3B8#E11D48#2563EB#059669#7C3AED#EA580C5. Dark Theme Code Block Colors (
v9_colors_dark.scss)Updated syntax highlighting to match observability palette (brighter variants for dark bg):
6. Docs: Remove Extra-Small Button (
button.js,button_empty.js)size="xs"button examples from docssize="s")Files Changed
src/themes/v9/components/_button.scsssrc/themes/v9/components/_index.scsssrc/themes/v9/global_styling/variables/_buttons.scsssrc/themes/v9/global_styling/variables/_borders.scsssrc/themes/v9/global_styling/variables/_colors.scsssrc/themes/v9/v9_colors_dark.scsssrc-docs/src/views/button/button.jssrc-docs/src/views/button/button_empty.jsTesting
yarn start→ verified at http://localhost:8030