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

[docs][base-ui] Add tokens to plain CSS theme stylesheet #40113

Merged
merged 36 commits into from
Jan 5, 2024
Merged

[docs][base-ui] Add tokens to plain CSS theme stylesheet #40113

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
f32737c
[docs] Add copy button to Base's component gallery page
mnajdova Nov 15, 2023
1b33cb2
prettier
mnajdova Nov 15, 2023
e143712
Add color picker
mnajdova Nov 16, 2023
48ee348
lint issues
mnajdova Nov 17, 2023
45e262f
prettier
mnajdova Nov 20, 2023
25b8cf3
Update docs/pages/experiments/base/components-gallery.tsx
mnajdova Nov 23, 2023
7f89cb8
When copying repalce the existing variables declaration
mnajdova Nov 23, 2023
40d985f
Merge branch 'pr/39884' into base-ui-stylesheet-tokens
zanivan Dec 5, 2023
9c68952
Add tokens to stylesheet
zanivan Dec 5, 2023
7b34fb1
Bump up the primary color
zanivan Dec 6, 2023
0f89d77
Add tokens to GalleryButton
zanivan Dec 6, 2023
c0e70cf
Add tokens to badge, input and menu
zanivan Dec 6, 2023
c044c6c
Add tokens to NumberInput, Popper/Popup, Select, and Slider
zanivan Dec 6, 2023
5ef0cc4
Merge remote-tracking branch 'upstream/master' into base-ui-styleshee…
zanivan Dec 6, 2023
74591ad
Add tokens to more components
zanivan Dec 7, 2023
25559af
Fix Stack classname
zanivan Dec 7, 2023
75bede4
Add typography styles
zanivan Dec 7, 2023
8b36a67
Some visual tweaks
zanivan Dec 7, 2023
a62aba6
fix snackbar icon color
zanivan Dec 7, 2023
1b038a9
Added button variants
zanivan Dec 8, 2023
1c6c1f1
Simplify CSS vars import
zanivan Dec 11, 2023
4798e66
Tweaks based on suggested changes
zanivan Dec 12, 2023
7a53716
push level one of refinements
danilo-leal Dec 13, 2023
a688b62
wrap up most of the styling for light mode
danilo-leal Dec 22, 2023
e5fc414
more light mode adjustments
danilo-leal Dec 22, 2023
e991494
kick off dark mode refinements
danilo-leal Dec 22, 2023
9bf7515
general updates
danilo-leal Dec 22, 2023
0e76ead
further dark mode tweaks
danilo-leal Dec 22, 2023
12b96df
general styles adjustments (light & dark mode)
danilo-leal Jan 3, 2024
cc06a75
fix the hue switching slider + other general fixes/adjustments
danilo-leal Jan 3, 2024
7795e10
adjust the CSS file
danilo-leal Jan 3, 2024
276f9ec
more fine-tune adjustments
danilo-leal Jan 3, 2024
3147fd3
tweak a few styles
danilo-leal Jan 4, 2024
5ba0680
final touches and coat of polish
danilo-leal Jan 5, 2024
fc66261
Merge branch 'master' into pr/40113
danilo-leal Jan 5, 2024
8bf8505
clean up
danilo-leal Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions docs/pages/experiments/base/components-gallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,16 +212,16 @@ export default function ComponentsGallery() {
const colorPickerSliderChangeHandler = (e: Event, value: number | number[]) => {
setRootStyles(`
:root {
--primary-50: hsl(${value}, 76%, 95%);
--primary-100: hsl(${value}, 70%, 86%);
--primary-200: hsl(${value}, 59%, 75%);
--primary-300: hsl(${value}, 49%, 60%);
--primary-400: hsl(${value}, 68%, 38%);
--primary-500: hsl(${value}, 76%, 21%);
--primary-600: hsl(${value}, 80%, 18%);
--primary-700: hsl(${value}, 84%, 15%);
--primary-800: hsl(${value}, 86%, 12%);
--primary-900: hsl(${value}, 90%, 8%);
--primary-50: hsl(${value}, 81%, 98%);
--primary-100: hsl(${value}, 75%, 91%);
--primary-200: hsl(${value}, 64%, 80%);
--primary-300: hsl(${value}, 54%, 65%);
--primary-400: hsl(${value}, 73%, 43%);
--primary-500: hsl(${value}, 81%, 26%);
--primary-600: hsl(${value}, 85%, 23%);
--primary-700: hsl(${value}, 89%, 20%);
--primary-800: hsl(${value}, 91%, 17%);
--primary-900: hsl(${value}, 95%, 13%);
}
`);

Expand All @@ -233,7 +233,7 @@ export default function ComponentsGallery() {
};

return (
<Stack gap={2} sx={{ padding: 1 }}>
<Stack className="GalleryContainer" gap={2} sx={{ padding: 2 }}>
{/* Copy theme button */}
<Box sx={{ position: 'absolute', right: '10px' }}>
<CopyButton className="GalleryButton" style={{ float: 'right' }} onClick={copyTheme}>
Expand Down Expand Up @@ -314,12 +314,14 @@ export default function ComponentsGallery() {
<span className="GalleryBadge-content" />
</Badge>
</div>
<div>
<Button className="GalleryButton">Button</Button>
<Stack direction="row" spacing={1}>
<Button className="GalleryButton">Solid</Button>
<Button className="GalleryButtonSoft">Soft</Button>
<Button className="GalleryButtonPlain">Plain</Button>
<Button className="GalleryButton" disabled>
Disabled
</Button>
</div>
</Stack>
<div>
<Input placeholder="Write your name here" className="GalleryInput" />
</div>
Expand Down
Loading