Skip to content

Commit 9757a2c

Browse files
SantaClaasSantaClaas
committed
Fix overwriting light-dark colors that also have a palette
1 parent 48da3c2 commit 9757a2c

2 files changed

Lines changed: 120 additions & 129 deletions

File tree

‎index.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ function camelToKebabCase(value) {
2929
/**
3030
*
3131
* @param {TonalPalette} palette
32+
* @returns {Generator<[number, string]>}
3233
*/
33-
function generatePaletteSteps(palette) {
34+
function* generatePaletteSteps(palette) {
3435
// Supported color steps
3536
// Material Design goes from 0 to 100 for lightness (like percent)
3637
// whereas Tailwind goes from 50 to 950
@@ -44,13 +45,9 @@ function generatePaletteSteps(palette) {
4445
0, 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
4546
];
4647

47-
/** @type {Record<string, string>} */
48-
const result = {};
4948
for (const step of materialPalletteSteps) {
50-
result[step] = hexFromArgb(palette.tone(step));
49+
yield [step, hexFromArgb(palette.tone(step))];
5150
}
52-
53-
return result;
5451
}
5552

5653
/** @typedef {[name: string, palette: TonalPalette][]} PaletteArray */
@@ -59,12 +56,14 @@ function generatePaletteSteps(palette) {
5956
* @param {PaletteArray} materialPalettes
6057
*/
6158
function createPalettes(materialPalettes) {
62-
/** @type {Record<string, Record<string, string>>} */
59+
/** @type {Record<string, string>} */
6360
const palettes = {};
6461
for (let [name, palette] of materialPalettes) {
65-
const paletteSteps = generatePaletteSteps(palette);
6662
name = camelToKebabCase(name);
67-
palettes[name] = paletteSteps;
63+
64+
for (const [step, color] of generatePaletteSteps(palette)) {
65+
palettes[`${name}-${step}`] = color;
66+
}
6867
}
6968

7069
return palettes;

‎theme test.snapshot.json‎

Lines changed: 112 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -746,26 +746,7 @@
746746
"reduced-contrast-surface-tint": "light-dark(#525a92, #bbc3ff)",
747747
"medium-contrast-surface-tint": "light-dark(#525a92, #bbc3ff)",
748748
"high-contrast-surface-tint": "light-dark(#525a92, #bbc3ff)",
749-
"primary": {
750-
"0": "#000000",
751-
"5": "#010841",
752-
"10": "#0c154b",
753-
"15": "#182055",
754-
"20": "#232c61",
755-
"25": "#2f376c",
756-
"30": "#3a4279",
757-
"35": "#464e85",
758-
"40": "#525a92",
759-
"50": "#6b73ad",
760-
"60": "#858dc8",
761-
"70": "#9fa7e5",
762-
"80": "#bbc3ff",
763-
"90": "#dfe0ff",
764-
"95": "#f0efff",
765-
"98": "#fbf8ff",
766-
"99": "#fffbff",
767-
"100": "#ffffff"
768-
},
749+
"primary": "light-dark(#525a92, #bbc3ff)",
769750
"reduced-contrast-primary": "light-dark(#6971aa, #858dc8)",
770751
"medium-contrast-primary": "light-dark(#293267, #d7daff)",
771752
"high-contrast-primary": "light-dark(#1f275c, #efeeff)",
@@ -785,26 +766,7 @@
785766
"reduced-contrast-inverse-primary": "light-dark(#6e76b0, #757db7)",
786767
"medium-contrast-inverse-primary": "light-dark(#bbc3ff, #3c447a)",
787768
"high-contrast-inverse-primary": "light-dark(#bbc3ff, #3c447a)",
788-
"secondary": {
789-
"0": "#000000",
790-
"5": "#0d1021",
791-
"10": "#181a2c",
792-
"15": "#222537",
793-
"20": "#2d2f42",
794-
"25": "#383a4d",
795-
"30": "#434559",
796-
"35": "#4f5165",
797-
"40": "#5b5d72",
798-
"50": "#74768b",
799-
"60": "#8e8fa6",
800-
"70": "#a8a9c1",
801-
"80": "#c4c5dd",
802-
"90": "#e0e1f9",
803-
"95": "#f0efff",
804-
"98": "#fbf8ff",
805-
"99": "#fffbff",
806-
"100": "#ffffff"
807-
},
769+
"secondary": "light-dark(#5b5d72, #c4c5dd)",
808770
"reduced-contrast-secondary": "light-dark(#717389, #8e8fa6)",
809771
"medium-contrast-secondary": "light-dark(#333548, #dadaf3)",
810772
"high-contrast-secondary": "light-dark(#292b3d, #efeeff)",
@@ -820,26 +782,7 @@
820782
"reduced-contrast-on-secondary-container": "light-dark(#77788e, #818399)",
821783
"medium-contrast-on-secondary-container": "light-dark(#ffffff, #000000)",
822784
"high-contrast-on-secondary-container": "light-dark(#ffffff, #070a1b)",
823-
"tertiary": {
824-
"0": "#000000",
825-
"5": "#21071c",
826-
"10": "#2d1227",
827-
"15": "#391c32",
828-
"20": "#45263d",
829-
"25": "#513148",
830-
"30": "#5d3c54",
831-
"35": "#6a4860",
832-
"40": "#77536c",
833-
"50": "#916c86",
834-
"60": "#ad85a0",
835-
"70": "#c99fbb",
836-
"80": "#e6bad7",
837-
"90": "#ffd7f0",
838-
"95": "#ffecf6",
839-
"98": "#fff7f9",
840-
"99": "#fffbff",
841-
"100": "#ffffff"
842-
},
785+
"tertiary": "light-dark(#77536c, #e6bad7)",
843786
"reduced-contrast-tertiary": "light-dark(#8f6983, #ad85a0)",
844787
"medium-contrast-tertiary": "light-dark(#4b2c43, #fdcfed)",
845788
"high-contrast-tertiary": "light-dark(#402239, #ffebf5)",
@@ -855,26 +798,7 @@
855798
"reduced-contrast-on-tertiary-container": "light-dark(#956e89, #9f7893)",
856799
"medium-contrast-on-tertiary-container": "light-dark(#ffffff, #000000)",
857800
"high-contrast-on-tertiary-container": "light-dark(#ffffff, #1a0316)",
858-
"error": {
859-
"0": "#000000",
860-
"5": "#2d0001",
861-
"10": "#410002",
862-
"15": "#540003",
863-
"20": "#690005",
864-
"25": "#7e0007",
865-
"30": "#93000a",
866-
"35": "#a80710",
867-
"40": "#ba1a1a",
868-
"50": "#de3730",
869-
"60": "#ff5449",
870-
"70": "#ff897d",
871-
"80": "#ffb4ab",
872-
"90": "#ffdad6",
873-
"95": "#ffedea",
874-
"98": "#fff8f7",
875-
"99": "#fffbff",
876-
"100": "#ffffff"
877-
},
801+
"error": "light-dark(#ba1a1a, #ffb4ab)",
878802
"reduced-contrast-error": "light-dark(#da342e, #ff5449)",
879803
"medium-contrast-error": "light-dark(#740006, #ffd2cc)",
880804
"high-contrast-error": "light-dark(#600004, #ffece9)",
@@ -938,46 +862,114 @@
938862
"reduced-contrast-on-tertiary-fixed-variant": "light-dark(#805b75, #bd94b0)",
939863
"medium-contrast-on-tertiary-fixed-variant": "light-dark(#ffffff, #4b2c43)",
940864
"high-contrast-on-tertiary-fixed-variant": "light-dark(#ffffff, #21071c)",
941-
"neutral": {
942-
"0": "#000000",
943-
"5": "#101116",
944-
"10": "#1b1b21",
945-
"15": "#25252b",
946-
"20": "#303036",
947-
"25": "#3b3b41",
948-
"30": "#46464c",
949-
"35": "#525258",
950-
"40": "#5e5e64",
951-
"50": "#77767d",
952-
"60": "#919097",
953-
"70": "#acaab1",
954-
"80": "#c7c5cd",
955-
"90": "#e4e1e9",
956-
"95": "#f2eff7",
957-
"98": "#fbf8ff",
958-
"99": "#fffbff",
959-
"100": "#ffffff"
960-
},
961-
"neutral-variant": {
962-
"0": "#000000",
963-
"5": "#101018",
964-
"10": "#1a1b23",
965-
"15": "#25252d",
966-
"20": "#2f3038",
967-
"25": "#3a3b43",
968-
"30": "#46464f",
969-
"35": "#52525b",
970-
"40": "#5e5e67",
971-
"50": "#767680",
972-
"60": "#90909a",
973-
"70": "#abaab4",
974-
"80": "#c7c5d0",
975-
"90": "#e3e1ec",
976-
"95": "#f1effa",
977-
"98": "#fbf8ff",
978-
"99": "#fffbff",
979-
"100": "#ffffff"
980-
}
865+
"primary-0": "#000000",
866+
"primary-5": "#010841",
867+
"primary-10": "#0c154b",
868+
"primary-15": "#182055",
869+
"primary-20": "#232c61",
870+
"primary-25": "#2f376c",
871+
"primary-30": "#3a4279",
872+
"primary-35": "#464e85",
873+
"primary-40": "#525a92",
874+
"primary-50": "#6b73ad",
875+
"primary-60": "#858dc8",
876+
"primary-70": "#9fa7e5",
877+
"primary-80": "#bbc3ff",
878+
"primary-90": "#dfe0ff",
879+
"primary-95": "#f0efff",
880+
"primary-98": "#fbf8ff",
881+
"primary-99": "#fffbff",
882+
"primary-100": "#ffffff",
883+
"secondary-0": "#000000",
884+
"secondary-5": "#0d1021",
885+
"secondary-10": "#181a2c",
886+
"secondary-15": "#222537",
887+
"secondary-20": "#2d2f42",
888+
"secondary-25": "#383a4d",
889+
"secondary-30": "#434559",
890+
"secondary-35": "#4f5165",
891+
"secondary-40": "#5b5d72",
892+
"secondary-50": "#74768b",
893+
"secondary-60": "#8e8fa6",
894+
"secondary-70": "#a8a9c1",
895+
"secondary-80": "#c4c5dd",
896+
"secondary-90": "#e0e1f9",
897+
"secondary-95": "#f0efff",
898+
"secondary-98": "#fbf8ff",
899+
"secondary-99": "#fffbff",
900+
"secondary-100": "#ffffff",
901+
"tertiary-0": "#000000",
902+
"tertiary-5": "#21071c",
903+
"tertiary-10": "#2d1227",
904+
"tertiary-15": "#391c32",
905+
"tertiary-20": "#45263d",
906+
"tertiary-25": "#513148",
907+
"tertiary-30": "#5d3c54",
908+
"tertiary-35": "#6a4860",
909+
"tertiary-40": "#77536c",
910+
"tertiary-50": "#916c86",
911+
"tertiary-60": "#ad85a0",
912+
"tertiary-70": "#c99fbb",
913+
"tertiary-80": "#e6bad7",
914+
"tertiary-90": "#ffd7f0",
915+
"tertiary-95": "#ffecf6",
916+
"tertiary-98": "#fff7f9",
917+
"tertiary-99": "#fffbff",
918+
"tertiary-100": "#ffffff",
919+
"neutral-0": "#000000",
920+
"neutral-5": "#101116",
921+
"neutral-10": "#1b1b21",
922+
"neutral-15": "#25252b",
923+
"neutral-20": "#303036",
924+
"neutral-25": "#3b3b41",
925+
"neutral-30": "#46464c",
926+
"neutral-35": "#525258",
927+
"neutral-40": "#5e5e64",
928+
"neutral-50": "#77767d",
929+
"neutral-60": "#919097",
930+
"neutral-70": "#acaab1",
931+
"neutral-80": "#c7c5cd",
932+
"neutral-90": "#e4e1e9",
933+
"neutral-95": "#f2eff7",
934+
"neutral-98": "#fbf8ff",
935+
"neutral-99": "#fffbff",
936+
"neutral-100": "#ffffff",
937+
"neutral-variant-0": "#000000",
938+
"neutral-variant-5": "#101018",
939+
"neutral-variant-10": "#1a1b23",
940+
"neutral-variant-15": "#25252d",
941+
"neutral-variant-20": "#2f3038",
942+
"neutral-variant-25": "#3a3b43",
943+
"neutral-variant-30": "#46464f",
944+
"neutral-variant-35": "#52525b",
945+
"neutral-variant-40": "#5e5e67",
946+
"neutral-variant-50": "#767680",
947+
"neutral-variant-60": "#90909a",
948+
"neutral-variant-70": "#abaab4",
949+
"neutral-variant-80": "#c7c5d0",
950+
"neutral-variant-90": "#e3e1ec",
951+
"neutral-variant-95": "#f1effa",
952+
"neutral-variant-98": "#fbf8ff",
953+
"neutral-variant-99": "#fffbff",
954+
"neutral-variant-100": "#ffffff",
955+
"error-0": "#000000",
956+
"error-5": "#2d0001",
957+
"error-10": "#410002",
958+
"error-15": "#540003",
959+
"error-20": "#690005",
960+
"error-25": "#7e0007",
961+
"error-30": "#93000a",
962+
"error-35": "#a80710",
963+
"error-40": "#ba1a1a",
964+
"error-50": "#de3730",
965+
"error-60": "#ff5449",
966+
"error-70": "#ff897d",
967+
"error-80": "#ffb4ab",
968+
"error-90": "#ffdad6",
969+
"error-95": "#ffedea",
970+
"error-98": "#fff8f7",
971+
"error-99": "#fffbff",
972+
"error-100": "#ffffff"
981973
}
982974
}
983975
}

0 commit comments

Comments
 (0)