Skip to content

WIP [DOCS]: design revamp #36965

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

Draft
nisarhassan12 wants to merge 30 commits into
base: main
Choose a base branch
from
Draft

WIP [DOCS]: design revamp #36965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0646e17
fix the postioning for the copy button in codeblocks + only show scro…
nisarhassan12 Nov 18, 2025
237f230
revert the change.
nisarhassan12 Nov 18, 2025
7c6ea03
update the meta preview image.
nisarhassan12 May 2, 2026
1be70bf
Merge branch 'MaterializeInc:main' into main
nisarhassan12 May 2, 2026
6a0f52a
Merge branch 'MaterializeInc:main' into main
nisarhassan12 May 15, 2026
d5507cb
add reo.
nisarhassan12 May 15, 2026
f8c729e
Merge branch 'MaterializeInc:main' into main
nisarhassan12 Jun 5, 2026
355278f
Merge branch 'MaterializeInc:main' into main
nisarhassan12 Jun 10, 2026
1ff1d31
update the logo.
nisarhassan12 Jun 10, 2026
c483ced
update the font family to Geist.
nisarhassan12 Jun 10, 2026
db08a94
color and theme updates.
nisarhassan12 Jun 10, 2026
566d2d0
btn ghost styling updates.
nisarhassan12 Jun 10, 2026
bba6d87
navbar small adjustments.
nisarhassan12 Jun 14, 2026
fd60935
refine docs layout and sidenav styling.
nisarhassan12 Jun 14, 2026
9ea7fe0
adjust the logo for light mode.
nisarhassan12 Jun 17, 2026
dd850d2
wip.
nisarhassan12 Jun 17, 2026
e6a9bed
follow the styleguide + typography + layout + background updates.
nisarhassan12 Jun 29, 2026
1c68d99
Merge branch 'MaterializeInc:main' into main
nisarhassan12 Jun 29, 2026
17e8959
Merge branch 'main' into nh12/design-revamp
nisarhassan12 Jun 29, 2026
ce3a654
background pattern small adjustments.
nisarhassan12 Jun 29, 2026
4691aea
light mode adjustments.
nisarhassan12 Jun 30, 2026
42ea6fd
avoid the glitch in the sidenav when the theme is changed.
nisarhassan12 Jun 30, 2026
a5c43c7
improve the linkbox cards design.
nisarhassan12 Jun 30, 2026
080a218
remove the icons from the mesh grid.
nisarhassan12 Jun 30, 2026
8a91c0d
add fonts.css with copyright header
nisarhassan12 Jun 30, 2026
91f0979
revert fonts.css addition
nisarhassan12 Jun 30, 2026
8166385
fonts fix.
nisarhassan12 Jun 30, 2026
9b84f07
docs: Improve tabbed component and numbered step styling
nisarhassan12 Jul 1, 2026
13bd712
Merge branch 'nh12/design-revamp-fix' into nh12/design-revamp
nisarhassan12 Jul 1, 2026
fc5fa23
code blocks and admontions stylings.
nisarhassan12 Jul 1, 2026
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
432 changes: 373 additions & 59 deletions doc/user/assets/sass/_base.scss
View file
Open in desktop

Large diffs are not rendered by default.

226 changes: 226 additions & 0 deletions doc/user/assets/sass/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
/* Color palette from www-temporary — oklch colorspace */

:root {
--color-current: currentColor;
--color-transparent: transparent;
--color-black: oklch(0.1807 0.0403 291.01);
--color-white: oklch(100% 0 0);

/* Gray */
--color-gray-50-oklch: 0.9707 0.0164 301.22;
--color-gray-50: oklch(var(--color-gray-50-oklch));
--color-gray-100-oklch: 0.9552 0.0245 298.61;
--color-gray-100: oklch(var(--color-gray-100-oklch));
--color-gray-200-oklch: 0.94 0.0271 295.05;
--color-gray-200: oklch(var(--color-gray-200-oklch));
--color-gray-300-oklch: 0.8956 0.0289 296.71;
--color-gray-300: oklch(var(--color-gray-300-oklch));
--color-gray-400-oklch: 0.7834 0.0285 297.18;
--color-gray-400: oklch(var(--color-gray-400-oklch));
--color-gray-500-oklch: 0.6836 0.0179 301.07;
--color-gray-500: oklch(var(--color-gray-500-oklch));
--color-gray-600-oklch: 0.5516 0.028 295.65;
--color-gray-600: oklch(var(--color-gray-600-oklch));
--color-gray-700-oklch: 0.4815 0.029 295.48;
--color-gray-700: oklch(var(--color-gray-700-oklch));
--color-gray-800-oklch: 0.3694 0.0274 293.61;
--color-gray-800: oklch(var(--color-gray-800-oklch));
--color-gray-900-oklch: 0.2413 0.0286 293.31;
--color-gray-900: oklch(var(--color-gray-900-oklch));

/* Purple */
--color-purple-50-oklch: 0.9533 0.0261 300.28;
--color-purple-50: oklch(var(--color-purple-50-oklch));
--color-purple-100-oklch: 0.8891 0.0649 301.94;
--color-purple-100: oklch(var(--color-purple-100-oklch));
--color-purple-200-oklch: 0.7791 0.1321 299.85;
--color-purple-200: oklch(var(--color-purple-200-oklch));
--color-purple-300-oklch: 0.6541 0.2052 293.72;
--color-purple-300: oklch(var(--color-purple-300-oklch));
--color-purple-400-oklch: 0.5826 0.245663 289.134;
--color-purple-400: oklch(var(--color-purple-400-oklch));
--color-purple-500-oklch: 0.5098 0.2669 284.47;
--color-purple-500: oklch(var(--color-purple-500-oklch));
--color-purple-600-oklch: 0.4915 0.2662 280.14;
--color-purple-600: oklch(var(--color-purple-600-oklch));
--color-purple-700-oklch: 0.4568 0.2639 276.88;
--color-purple-700: oklch(var(--color-purple-700-oklch));
--color-purple-800-oklch: 0.4307 0.2663 269.92;
--color-purple-800: oklch(var(--color-purple-800-oklch));
--color-purple-900-oklch: 0.3893 0.2637 264.13;
--color-purple-900: oklch(var(--color-purple-900-oklch));

/* Lavender */
--color-lavender-50-oklch: 0.8445 0.0536 298.49;
--color-lavender-50: oklch(var(--color-lavender-50-oklch));
--color-lavender-100-oklch: 0.7842 0.0687 297.2;
--color-lavender-100: oklch(var(--color-lavender-100-oklch));
--color-lavender-200-oklch: 0.7209 0.0977 296.91;
--color-lavender-200: oklch(var(--color-lavender-200-oklch));
--color-lavender-300-oklch: 0.627 0.1324 295.25;
--color-lavender-300: oklch(var(--color-lavender-300-oklch));
--color-lavender-400-oklch: 0.5031 0.1765 292.12;
--color-lavender-400: oklch(var(--color-lavender-400-oklch));
--color-lavender-500-oklch: 0.384 0.1372 291.44;
--color-lavender-500: oklch(var(--color-lavender-500-oklch));
--color-lavender-600-oklch: 0.3455 0.1201 292.18;
--color-lavender-600: oklch(var(--color-lavender-600-oklch));
--color-lavender-700-oklch: 0.3113 0.1052 292.61;
--color-lavender-700: oklch(var(--color-lavender-700-oklch));
--color-lavender-800-oklch: 0.2817 0.0925 292.49;
--color-lavender-800: oklch(var(--color-lavender-800-oklch));
--color-lavender-900-oklch: 0.1726 0.0425 289.97;
--color-lavender-900: oklch(var(--color-lavender-900-oklch));

/* Pink */
--color-pink-50-oklch: 0.914 0.0788 326.2;
--color-pink-50: oklch(var(--color-pink-50-oklch));
--color-pink-100-oklch: 0.8511 0.1427 326.74;
--color-pink-100: oklch(var(--color-pink-100-oklch));
--color-pink-200-oklch: 0.8004 0.1988 327.23;
--color-pink-200: oklch(var(--color-pink-200-oklch));
--color-pink-300-oklch: 0.7571 0.249 327.95;
--color-pink-300: oklch(var(--color-pink-300-oklch));
--color-pink-400-oklch: 0.7297 0.2796 328.94;
--color-pink-400: oklch(var(--color-pink-400-oklch));
--color-pink-500-oklch: 0.7039 0.3082 330.05;
--color-pink-500: oklch(var(--color-pink-500-oklch));
--color-pink-600-oklch: 0.6814 0.3058 333.1;
--color-pink-600: oklch(var(--color-pink-600-oklch));
--color-pink-700-oklch: 0.6068 0.2767 329.91;
--color-pink-700: oklch(var(--color-pink-700-oklch));
--color-pink-800-oklch: 0.5622 0.2569 329.49;
--color-pink-800: oklch(var(--color-pink-800-oklch));
--color-pink-900-oklch: 0.4773 0.2182 329.4;
--color-pink-900: oklch(var(--color-pink-900-oklch));

/* Teal */
--color-teal-50-oklch: 0.9756 0.0213 186.04;
--color-teal-50: oklch(var(--color-teal-50-oklch));
--color-teal-100-oklch: 0.9665 0.0298 183.8;
--color-teal-100: oklch(var(--color-teal-100-oklch));
--color-teal-200-oklch: 0.9378 0.0542 183.4;
--color-teal-200: oklch(var(--color-teal-200-oklch));
--color-teal-300-oklch: 0.9065 0.0984 182.02;
--color-teal-300: oklch(var(--color-teal-300-oklch));
--color-teal-350-oklch: 0.8761 0.1297 181.02;
--color-teal-350: oklch(var(--color-teal-350-oklch));
--color-teal-400-oklch: 0.8562 0.1545 180.23;
--color-teal-400: oklch(var(--color-teal-400-oklch));
--color-teal-500-oklch: 0.8073 0.1401 179.17;
--color-teal-500: oklch(var(--color-teal-500-oklch));
--color-teal-550-oklch: 0.8207 0.144 171.1;
--color-teal-550: oklch(var(--color-teal-550-oklch));
--color-teal-600-oklch: 0.7292 0.1326 179.65;
--color-teal-600: oklch(var(--color-teal-600-oklch));
--color-teal-700-oklch: 0.6556 0.118699 180.3171;
--color-teal-700: oklch(var(--color-teal-700-oklch));
--color-teal-800-oklch: 0.5041 0.091051 180.6891;
--color-teal-800: oklch(var(--color-teal-800-oklch));
--color-teal-900-oklch: 0.3542 0.043 207.05;
--color-teal-900: oklch(var(--color-teal-900-oklch));

/* Blue */
--color-blue-50-oklch: 0.9597 0.0144 244.72;
--color-blue-50: oklch(var(--color-blue-50-oklch));
--color-blue-100-oklch: 0.9191 0.0281 243.11;
--color-blue-100: oklch(var(--color-blue-100-oklch));
--color-blue-200-oklch: 0.8881 0.0401 242.45;
--color-blue-200: oklch(var(--color-blue-200-oklch));
--color-blue-300-oklch: 0.8401 0.0739 238.99;
--color-blue-300: oklch(var(--color-blue-300-oklch));
--color-blue-400-oklch: 0.8039 0.108 235.56;
--color-blue-400: oklch(var(--color-blue-400-oklch));
--color-blue-500-oklch: 0.7668 0.142 233.74;
--color-blue-500: oklch(var(--color-blue-500-oklch));
--color-blue-600-oklch: 0.717 0.1313 234.29;
--color-blue-600: oklch(var(--color-blue-600-oklch));
--color-blue-700-oklch: 0.6577 0.1176 235.31;
--color-blue-700: oklch(var(--color-blue-700-oklch));
--color-blue-800-oklch: 0.5973 0.1032 236.86;
--color-blue-800: oklch(var(--color-blue-800-oklch));
--color-blue-900-oklch: 0.4866 0.0831 240.87;
--color-blue-900: oklch(var(--color-blue-900-oklch));

/* Error */
--color-error-50-oklch: 0.9577 0.0196 13.63;
--color-error-50: oklch(var(--color-error-50-oklch));
--color-error-100-oklch: 0.9148 0.0391 15.93;
--color-error-100: oklch(var(--color-error-100-oklch));
--color-error-200-oklch: 0.8429 0.0756 16.74;
--color-error-200: oklch(var(--color-error-200-oklch));
--color-error-300-oklch: 0.7401 0.144 17.5;
--color-error-300: oklch(var(--color-error-300-oklch));
--color-error-400-oklch: 0.7031 0.1897 17.76;
--color-error-400: oklch(var(--color-error-400-oklch));
--color-error-500-oklch: 0.666 0.2229 17.56;
--color-error-500: oklch(var(--color-error-500-oklch));
--color-error-600-oklch: 0.64 0.217 17.55;
--color-error-600: oklch(var(--color-error-600-oklch));
--color-error-700-oklch: 0.6136 0.2084 17.78;
--color-error-700: oklch(var(--color-error-700-oklch));
--color-error-800-oklch: 0.5766 0.1993 17.34;
--color-error-800: oklch(var(--color-error-800-oklch));
--color-error-900-oklch: 0.5244 0.185 17.34;
--color-error-900: oklch(var(--color-error-900-oklch));

/* Warning */
--color-warning-50-oklch: 0.9844 0.0189 93.66;
--color-warning-50: oklch(var(--color-warning-50-oklch));
--color-warning-100-oklch: 0.974 0.0346 96.29;
--color-warning-100: oklch(var(--color-warning-100-oklch));
--color-warning-200-oklch: 0.9525 0.0606 96.15;
--color-warning-200: oklch(var(--color-warning-200-oklch));
--color-warning-300-oklch: 0.9375 0.0913 96.3;
--color-warning-300: oklch(var(--color-warning-300-oklch));
--color-warning-400-oklch: 0.929 0.118 96.67;
--color-warning-400: oklch(var(--color-warning-400-oklch));
--color-warning-500-oklch: 0.921 0.1367 96.69;
--color-warning-500: oklch(var(--color-warning-500-oklch));
--color-warning-600-oklch: 0.8792 0.129 89.34;
--color-warning-600: oklch(var(--color-warning-600-oklch));
--color-warning-700-oklch: 0.8297 0.1219 79.7;
--color-warning-700: oklch(var(--color-warning-700-oklch));
--color-warning-800-oklch: 0.7814 0.1211 69.05;
--color-warning-800: oklch(var(--color-warning-800-oklch));
--color-warning-900-oklch: 0.7012 0.1352 51.49;
--color-warning-900: oklch(var(--color-warning-900-oklch));

/* Success */
--color-success-50-oklch: 0.9788 0.0221 160.24;
--color-success-50: oklch(var(--color-success-50-oklch));
--color-success-100-oklch: 0.9489 0.0556 156.34;
--color-success-100: oklch(var(--color-success-100-oklch));
--color-success-200-oklch: 0.9039 0.1006 157.23;
--color-success-200: oklch(var(--color-success-200-oklch));
--color-success-300-oklch: 0.8453 0.1477 157.54;
--color-success-300: oklch(var(--color-success-300-oklch));
--color-success-400-oklch: 0.773 0.1754 155.5;
--color-success-400: oklch(var(--color-success-400-oklch));
--color-success-500-oklch: 0.6859 0.1667 154.86;
--color-success-500: oklch(var(--color-success-500-oklch));
--color-success-600-oklch: 0.597 0.1485 154.46;
--color-success-600: oklch(var(--color-success-600-oklch));
--color-success-700-oklch: 0.51 0.1218 156.56;
--color-success-700: oklch(var(--color-success-700-oklch));
--color-success-800-oklch: 0.4315 0.0995 157.67;
--color-success-800: oklch(var(--color-success-800-oklch));
--color-success-900-oklch: 0.2637 0.0332 162.32;
--color-success-900: oklch(var(--color-success-900-oklch));

/* Alpha */
--color-lavender-alpha-oklch: 0.7921 0.0715 297.58;
--color-lavender-alpha: oklch(var(--color-lavender-alpha-oklch) / 20%);
--color-pink-alpha-oklch: 0.6814 0.3058 333.1;
--color-pink-alpha: oklch(var(--color-pink-alpha-oklch) / 20%);
--color-teal-alpha-oklch: 0.8761 0.1297 181.02;
--color-teal-alpha: oklch(var(--color-teal-alpha-oklch) / 20%);
--color-blue-alpha-oklch: 0.7668 0.142 233.74;
--color-blue-alpha: oklch(var(--color-blue-alpha-oklch) / 20%);
--color-error-alpha-oklch: 0.7031 0.1897 17.76;
--color-error-alpha: oklch(var(--color-error-alpha-oklch) / 20%);
--color-warning-alpha-oklch: 0.921 0.1367 96.69;
--color-warning-alpha: oklch(var(--color-warning-alpha-oklch) / 20%);
--color-white-alpha-oklch: 1 0 100;
--color-black-alpha-oklch: 0 0 100;
}
Loading
Loading