diff --git a/.gitignore b/.gitignore index 3fe33f5..8a2a366 100644 --- a/.gitignore +++ b/.gitignore @@ -481,7 +481,7 @@ OpenCover/ ASALocalRun/ # MSBuild Binary and Structured Log -*.binlog +# *.binlog # NVidia Nsight GPU debugger configuration file *.nvuser @@ -546,7 +546,7 @@ xcuserdata/ # ============================================================================= .metadata -bin/ +# bin/ tmp/ *.tmp *.bak diff --git a/dist/css/hue.gl.css b/dist/css/hue.gl.css index 6966675..1ba0bc3 100644 --- a/dist/css/hue.gl.css +++ b/dist/css/hue.gl.css @@ -16,6 +16,234 @@ TABLE OF CONTENTS 2. 3. */ +:root { + --color-N0001: #e2e2e2; + --color-N0002: #cccccc; + --color-N0003: #b6b6b6; + --color-N0004: #a0a0a0; + --color-N0005: #8b8b8b; + --color-N0006: #777777; + --color-N0007: #636363; + --color-N0008: #505050; + --color-N0009: #3e3e3e; + --color-N0151: #fadbdd; + --color-N0152: #eec0c4; + --color-N0153: #e2a6ac; + --color-N0154: #d48c94; + --color-N0155: #c6727d; + --color-N0156: #a7636b; + --color-N0157: #89545a; + --color-N0158: #6b4549; + --color-N0159: #4f3739; + --color-N0301: #fadbd7; + --color-N0302: #edc1bc; + --color-N0303: #e0a8a1; + --color-N0304: #d28e87; + --color-N0305: #c4756e; + --color-N0306: #a5655f; + --color-N0307: #875650; + --color-N0308: #6b4642; + --color-N0309: #4f3835; + --color-N0451: #f8dcd3; + --color-N0452: #eac3b5; + --color-N0453: #dcaa98; + --color-N0454: #cd927c; + --color-N0455: #be7960; + --color-N0456: #a06954; + --color-N0457: #845848; + --color-N0458: #68483c; + --color-N0459: #4d3931; + --color-N0601: #f4decf; + --color-N0602: #e5c6af; + --color-N0603: #d5ad90; + --color-N0604: #c59672; + --color-N0605: #b57f55; + --color-N0606: #996d4b; + --color-N0607: #7e5b41; + --color-N0608: #644a38; + --color-N0609: #4a3a2e; + --color-N0751: #efe0cc; + --color-N0752: #dec8ac; + --color-N0753: #cdb18c; + --color-N0754: #bb9b6c; + --color-N0755: #a9854e; + --color-N0756: #8f7145; + --color-N0757: #765f3d; + --color-N0758: #5e4d34; + --color-N0759: #473c2c; + --color-N0901: #eae2cb; + --color-N0902: #d6cbaa; + --color-N0903: #c2b58a; + --color-N0904: #af9f6a; + --color-N0905: #9b8a4b; + --color-N0906: #847643; + --color-N0907: #6d623b; + --color-N0908: #584f33; + --color-N0909: #433d2b; + --color-N1051: #e3e4cc; + --color-N1052: #cdceab; + --color-N1053: #b7b98b; + --color-N1054: #a1a46b; + --color-N1055: #8b8f4c; + --color-N1056: #777a44; + --color-N1057: #63663c; + --color-N1058: #505234; + --color-N1059: #3e3f2c; + --color-N1201: #dde6ce; + --color-N1202: #c4d1ae; + --color-N1203: #abbc8f; + --color-N1204: #92a870; + --color-N1205: #7a9453; + --color-N1206: #697e49; + --color-N1207: #586840; + --color-N1208: #485437; + --color-N1209: #39402d; + --color-N1351: #d7e7d2; + --color-N1352: #bbd3b3; + --color-N1353: #9fbf96; + --color-N1354: #83ab79; + --color-N1355: #68975d; + --color-N1356: #5a8151; + --color-N1357: #4d6b46; + --color-N1358: #40553b; + --color-N1359: #344130; + --color-N1501: #d1e8d6; + --color-N1502: #b2d4ba; + --color-N1503: #93c19f; + --color-N1504: #74ad84; + --color-N1505: #559a6a; + --color-N1506: #4b835c; + --color-N1507: #426c4e; + --color-N1508: #395741; + --color-N1509: #2f4234; + --color-N1651: #cde9dc; + --color-N1652: #abd6c2; + --color-N1653: #89c2a9; + --color-N1654: #66af91; + --color-N1655: #409b7a; + --color-N1656: #3c8469; + --color-N1657: #376d58; + --color-N1658: #315848; + --color-N1659: #2b4338; + --color-N1801: #c9e9e2; + --color-N1802: #a6d6cb; + --color-N1803: #81c3b5; + --color-N1804: #5baf9f; + --color-N1805: #2a9c8a; + --color-N1806: #2d8576; + --color-N1807: #2d6e62; + --color-N1808: #2b584f; + --color-N1809: #28433d; + --color-N1951: #c8e9e8; + --color-N1952: #a3d6d4; + --color-N1953: #7dc3c0; + --color-N1954: #53afad; + --color-N1955: #109c9a; + --color-N1956: #208583; + --color-N1957: #266e6d; + --color-N1958: #275857; + --color-N1959: #264342; + --color-N2101: #c8e9ed; + --color-N2102: #a3d5dc; + --color-N2103: #7dc2cb; + --color-N2104: #52aeba; + --color-N2105: #019baa; + --color-N2106: #1c8490; + --color-N2107: #246d76; + --color-N2108: #27575e; + --color-N2109: #264246; + --color-N2251: #cae8f2; + --color-N2252: #a6d4e3; + --color-N2253: #81c0d4; + --color-N2254: #58acc6; + --color-N2255: #1a99b7; + --color-N2256: #25829a; + --color-N2257: #2a6c7e; + --color-N2258: #2a5664; + --color-N2259: #27424a; + --color-N2401: #cee6f6; + --color-N2402: #acd2e9; + --color-N2403: #8abedc; + --color-N2404: #65aace; + --color-N2405: #3696c1; + --color-N2406: #3680a3; + --color-N2407: #346a85; + --color-N2408: #305568; + --color-N2409: #2b414d; + --color-N2551: #d3e5f8; + --color-N2552: #b5cfec; + --color-N2553: #95bbe0; + --color-N2554: #75a6d4; + --color-N2555: #5192c8; + --color-N2556: #497ca8; + --color-N2557: #416789; + --color-N2558: #39536b; + --color-N2559: #303f4f; + --color-N2701: #dae3f9; + --color-N2702: #becdee; + --color-N2703: #a3b7e2; + --color-N2704: #87a2d6; + --color-N2705: #6a8dca; + --color-N2706: #5d78aa; + --color-N2707: #4f648b; + --color-N2708: #42516c; + --color-N2709: #353e50; + --color-N2851: #e0e1f9; + --color-N2852: #c8caed; + --color-N2853: #b1b3e1; + --color-N2854: #999dd5; + --color-N2855: #8188c8; + --color-N2856: #6f74a8; + --color-N2857: #5d6189; + --color-N2858: #4c4e6c; + --color-N2859: #3b3c4f; + --color-N3001: #e7dff6; + --color-N3002: #d3c7e9; + --color-N3003: #beafdc; + --color-N3004: #aa98cf; + --color-N3005: #9582c2; + --color-N3006: #7f6fa3; + --color-N3007: #6a5d86; + --color-N3008: #554c69; + --color-N3009: #413b4d; + --color-N3151: #edddf3; + --color-N3152: #dcc4e4; + --color-N3153: #caacd6; + --color-N3154: #b994c7; + --color-N3155: #a77cb9; + --color-N3156: #8d6b9c; + --color-N3157: #755a7f; + --color-N3158: #5d4964; + --color-N3159: #46394b; + --color-N3301: #f3dcee; + --color-N3302: #e3c2dd; + --color-N3303: #d4a9cd; + --color-N3304: #c590bc; + --color-N3305: #b577ac; + --color-N3306: #996791; + --color-N3307: #7d5777; + --color-N3308: #63475f; + --color-N3309: #4a3847; + --color-N3451: #f7dbe9; + --color-N3452: #e9c1d5; + --color-N3453: #dba7c2; + --color-N3454: #cd8daf; + --color-N3455: #bf739d; + --color-N3456: #a16485; + --color-N3457: #84546e; + --color-N3458: #684658; + --color-N3459: #4d3743; + --color-N3601: #f9dbe3; + --color-N3602: #edc0cd; + --color-N3603: #e0a6b7; + --color-N3604: #d38ca2; + --color-N3605: #c5728d; + --color-N3606: #a66278; + --color-N3607: #885464; + --color-N3608: #6b4551; + --color-N3609: #4f373e; +} + .text-N0001 { color: #e2e2e2; } @@ -2715,232 +2943,4 @@ TABLE OF CONTENTS .border-N3609 { border-color: #4f373e; } - -:root { - --color-N0001: #e2e2e2; - --color-N0002: #cccccc; - --color-N0003: #b6b6b6; - --color-N0004: #a0a0a0; - --color-N0005: #8b8b8b; - --color-N0006: #777777; - --color-N0007: #636363; - --color-N0008: #505050; - --color-N0009: #3e3e3e; - --color-N0151: #fadbdd; - --color-N0152: #eec0c4; - --color-N0153: #e2a6ac; - --color-N0154: #d48c94; - --color-N0155: #c6727d; - --color-N0156: #a7636b; - --color-N0157: #89545a; - --color-N0158: #6b4549; - --color-N0159: #4f3739; - --color-N0301: #fadbd7; - --color-N0302: #edc1bc; - --color-N0303: #e0a8a1; - --color-N0304: #d28e87; - --color-N0305: #c4756e; - --color-N0306: #a5655f; - --color-N0307: #875650; - --color-N0308: #6b4642; - --color-N0309: #4f3835; - --color-N0451: #f8dcd3; - --color-N0452: #eac3b5; - --color-N0453: #dcaa98; - --color-N0454: #cd927c; - --color-N0455: #be7960; - --color-N0456: #a06954; - --color-N0457: #845848; - --color-N0458: #68483c; - --color-N0459: #4d3931; - --color-N0601: #f4decf; - --color-N0602: #e5c6af; - --color-N0603: #d5ad90; - --color-N0604: #c59672; - --color-N0605: #b57f55; - --color-N0606: #996d4b; - --color-N0607: #7e5b41; - --color-N0608: #644a38; - --color-N0609: #4a3a2e; - --color-N0751: #efe0cc; - --color-N0752: #dec8ac; - --color-N0753: #cdb18c; - --color-N0754: #bb9b6c; - --color-N0755: #a9854e; - --color-N0756: #8f7145; - --color-N0757: #765f3d; - --color-N0758: #5e4d34; - --color-N0759: #473c2c; - --color-N0901: #eae2cb; - --color-N0902: #d6cbaa; - --color-N0903: #c2b58a; - --color-N0904: #af9f6a; - --color-N0905: #9b8a4b; - --color-N0906: #847643; - --color-N0907: #6d623b; - --color-N0908: #584f33; - --color-N0909: #433d2b; - --color-N1051: #e3e4cc; - --color-N1052: #cdceab; - --color-N1053: #b7b98b; - --color-N1054: #a1a46b; - --color-N1055: #8b8f4c; - --color-N1056: #777a44; - --color-N1057: #63663c; - --color-N1058: #505234; - --color-N1059: #3e3f2c; - --color-N1201: #dde6ce; - --color-N1202: #c4d1ae; - --color-N1203: #abbc8f; - --color-N1204: #92a870; - --color-N1205: #7a9453; - --color-N1206: #697e49; - --color-N1207: #586840; - --color-N1208: #485437; - --color-N1209: #39402d; - --color-N1351: #d7e7d2; - --color-N1352: #bbd3b3; - --color-N1353: #9fbf96; - --color-N1354: #83ab79; - --color-N1355: #68975d; - --color-N1356: #5a8151; - --color-N1357: #4d6b46; - --color-N1358: #40553b; - --color-N1359: #344130; - --color-N1501: #d1e8d6; - --color-N1502: #b2d4ba; - --color-N1503: #93c19f; - --color-N1504: #74ad84; - --color-N1505: #559a6a; - --color-N1506: #4b835c; - --color-N1507: #426c4e; - --color-N1508: #395741; - --color-N1509: #2f4234; - --color-N1651: #cde9dc; - --color-N1652: #abd6c2; - --color-N1653: #89c2a9; - --color-N1654: #66af91; - --color-N1655: #409b7a; - --color-N1656: #3c8469; - --color-N1657: #376d58; - --color-N1658: #315848; - --color-N1659: #2b4338; - --color-N1801: #c9e9e2; - --color-N1802: #a6d6cb; - --color-N1803: #81c3b5; - --color-N1804: #5baf9f; - --color-N1805: #2a9c8a; - --color-N1806: #2d8576; - --color-N1807: #2d6e62; - --color-N1808: #2b584f; - --color-N1809: #28433d; - --color-N1951: #c8e9e8; - --color-N1952: #a3d6d4; - --color-N1953: #7dc3c0; - --color-N1954: #53afad; - --color-N1955: #109c9a; - --color-N1956: #208583; - --color-N1957: #266e6d; - --color-N1958: #275857; - --color-N1959: #264342; - --color-N2101: #c8e9ed; - --color-N2102: #a3d5dc; - --color-N2103: #7dc2cb; - --color-N2104: #52aeba; - --color-N2105: #019baa; - --color-N2106: #1c8490; - --color-N2107: #246d76; - --color-N2108: #27575e; - --color-N2109: #264246; - --color-N2251: #cae8f2; - --color-N2252: #a6d4e3; - --color-N2253: #81c0d4; - --color-N2254: #58acc6; - --color-N2255: #1a99b7; - --color-N2256: #25829a; - --color-N2257: #2a6c7e; - --color-N2258: #2a5664; - --color-N2259: #27424a; - --color-N2401: #cee6f6; - --color-N2402: #acd2e9; - --color-N2403: #8abedc; - --color-N2404: #65aace; - --color-N2405: #3696c1; - --color-N2406: #3680a3; - --color-N2407: #346a85; - --color-N2408: #305568; - --color-N2409: #2b414d; - --color-N2551: #d3e5f8; - --color-N2552: #b5cfec; - --color-N2553: #95bbe0; - --color-N2554: #75a6d4; - --color-N2555: #5192c8; - --color-N2556: #497ca8; - --color-N2557: #416789; - --color-N2558: #39536b; - --color-N2559: #303f4f; - --color-N2701: #dae3f9; - --color-N2702: #becdee; - --color-N2703: #a3b7e2; - --color-N2704: #87a2d6; - --color-N2705: #6a8dca; - --color-N2706: #5d78aa; - --color-N2707: #4f648b; - --color-N2708: #42516c; - --color-N2709: #353e50; - --color-N2851: #e0e1f9; - --color-N2852: #c8caed; - --color-N2853: #b1b3e1; - --color-N2854: #999dd5; - --color-N2855: #8188c8; - --color-N2856: #6f74a8; - --color-N2857: #5d6189; - --color-N2858: #4c4e6c; - --color-N2859: #3b3c4f; - --color-N3001: #e7dff6; - --color-N3002: #d3c7e9; - --color-N3003: #beafdc; - --color-N3004: #aa98cf; - --color-N3005: #9582c2; - --color-N3006: #7f6fa3; - --color-N3007: #6a5d86; - --color-N3008: #554c69; - --color-N3009: #413b4d; - --color-N3151: #edddf3; - --color-N3152: #dcc4e4; - --color-N3153: #caacd6; - --color-N3154: #b994c7; - --color-N3155: #a77cb9; - --color-N3156: #8d6b9c; - --color-N3157: #755a7f; - --color-N3158: #5d4964; - --color-N3159: #46394b; - --color-N3301: #f3dcee; - --color-N3302: #e3c2dd; - --color-N3303: #d4a9cd; - --color-N3304: #c590bc; - --color-N3305: #b577ac; - --color-N3306: #996791; - --color-N3307: #7d5777; - --color-N3308: #63475f; - --color-N3309: #4a3847; - --color-N3451: #f7dbe9; - --color-N3452: #e9c1d5; - --color-N3453: #dba7c2; - --color-N3454: #cd8daf; - --color-N3455: #bf739d; - --color-N3456: #a16485; - --color-N3457: #84546e; - --color-N3458: #684658; - --color-N3459: #4d3743; - --color-N3601: #f9dbe3; - --color-N3602: #edc0cd; - --color-N3603: #e0a6b7; - --color-N3604: #d38ca2; - --color-N3605: #c5728d; - --color-N3606: #a66278; - --color-N3607: #885464; - --color-N3608: #6b4551; - --color-N3609: #4f373e; -} /*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/css/hue.gl.min.css b/dist/css/hue.gl.min.css index 5776f7f..5084422 100644 --- a/dist/css/hue.gl.min.css +++ b/dist/css/hue.gl.min.css @@ -1,2 +1,2 @@ -.text-N0001{color:#e2e2e2}.bg-N0001{background-color:#e2e2e2}.border-N0001{border-color:#e2e2e2}.text-N0002{color:#ccc}.bg-N0002{background-color:#ccc}.border-N0002{border-color:#ccc}.text-N0003{color:#b6b6b6}.bg-N0003{background-color:#b6b6b6}.border-N0003{border-color:#b6b6b6}.text-N0004{color:#a0a0a0}.bg-N0004{background-color:#a0a0a0}.border-N0004{border-color:#a0a0a0}.text-N0005{color:#8b8b8b}.bg-N0005{background-color:#8b8b8b}.border-N0005{border-color:#8b8b8b}.text-N0006{color:#777}.bg-N0006{background-color:#777}.border-N0006{border-color:#777}.text-N0007{color:#636363}.bg-N0007{background-color:#636363}.border-N0007{border-color:#636363}.text-N0008{color:#505050}.bg-N0008{background-color:#505050}.border-N0008{border-color:#505050}.text-N0009{color:#3e3e3e}.bg-N0009{background-color:#3e3e3e}.border-N0009{border-color:#3e3e3e}.text-N0151{color:#fadbdd}.bg-N0151{background-color:#fadbdd}.border-N0151{border-color:#fadbdd}.text-N0152{color:#eec0c4}.bg-N0152{background-color:#eec0c4}.border-N0152{border-color:#eec0c4}.text-N0153{color:#e2a6ac}.bg-N0153{background-color:#e2a6ac}.border-N0153{border-color:#e2a6ac}.text-N0154{color:#d48c94}.bg-N0154{background-color:#d48c94}.border-N0154{border-color:#d48c94}.text-N0155{color:#c6727d}.bg-N0155{background-color:#c6727d}.border-N0155{border-color:#c6727d}.text-N0156{color:#a7636b}.bg-N0156{background-color:#a7636b}.border-N0156{border-color:#a7636b}.text-N0157{color:#89545a}.bg-N0157{background-color:#89545a}.border-N0157{border-color:#89545a}.text-N0158{color:#6b4549}.bg-N0158{background-color:#6b4549}.border-N0158{border-color:#6b4549}.text-N0159{color:#4f3739}.bg-N0159{background-color:#4f3739}.border-N0159{border-color:#4f3739}.text-N0301{color:#fadbd7}.bg-N0301{background-color:#fadbd7}.border-N0301{border-color:#fadbd7}.text-N0302{color:#edc1bc}.bg-N0302{background-color:#edc1bc}.border-N0302{border-color:#edc1bc}.text-N0303{color:#e0a8a1}.bg-N0303{background-color:#e0a8a1}.border-N0303{border-color:#e0a8a1}.text-N0304{color:#d28e87}.bg-N0304{background-color:#d28e87}.border-N0304{border-color:#d28e87}.text-N0305{color:#c4756e}.bg-N0305{background-color:#c4756e}.border-N0305{border-color:#c4756e}.text-N0306{color:#a5655f}.bg-N0306{background-color:#a5655f}.border-N0306{border-color:#a5655f}.text-N0307{color:#875650}.bg-N0307{background-color:#875650}.border-N0307{border-color:#875650}.text-N0308{color:#6b4642}.bg-N0308{background-color:#6b4642}.border-N0308{border-color:#6b4642}.text-N0309{color:#4f3835}.bg-N0309{background-color:#4f3835}.border-N0309{border-color:#4f3835}.text-N0451{color:#f8dcd3}.bg-N0451{background-color:#f8dcd3}.border-N0451{border-color:#f8dcd3}.text-N0452{color:#eac3b5}.bg-N0452{background-color:#eac3b5}.border-N0452{border-color:#eac3b5}.text-N0453{color:#dcaa98}.bg-N0453{background-color:#dcaa98}.border-N0453{border-color:#dcaa98}.text-N0454{color:#cd927c}.bg-N0454{background-color:#cd927c}.border-N0454{border-color:#cd927c}.text-N0455{color:#be7960}.bg-N0455{background-color:#be7960}.border-N0455{border-color:#be7960}.text-N0456{color:#a06954}.bg-N0456{background-color:#a06954}.border-N0456{border-color:#a06954}.text-N0457{color:#845848}.bg-N0457{background-color:#845848}.border-N0457{border-color:#845848}.text-N0458{color:#68483c}.bg-N0458{background-color:#68483c}.border-N0458{border-color:#68483c}.text-N0459{color:#4d3931}.bg-N0459{background-color:#4d3931}.border-N0459{border-color:#4d3931}.text-N0601{color:#f4decf}.bg-N0601{background-color:#f4decf}.border-N0601{border-color:#f4decf}.text-N0602{color:#e5c6af}.bg-N0602{background-color:#e5c6af}.border-N0602{border-color:#e5c6af}.text-N0603{color:#d5ad90}.bg-N0603{background-color:#d5ad90}.border-N0603{border-color:#d5ad90}.text-N0604{color:#c59672}.bg-N0604{background-color:#c59672}.border-N0604{border-color:#c59672}.text-N0605{color:#b57f55}.bg-N0605{background-color:#b57f55}.border-N0605{border-color:#b57f55}.text-N0606{color:#996d4b}.bg-N0606{background-color:#996d4b}.border-N0606{border-color:#996d4b}.text-N0607{color:#7e5b41}.bg-N0607{background-color:#7e5b41}.border-N0607{border-color:#7e5b41}.text-N0608{color:#644a38}.bg-N0608{background-color:#644a38}.border-N0608{border-color:#644a38}.text-N0609{color:#4a3a2e}.bg-N0609{background-color:#4a3a2e}.border-N0609{border-color:#4a3a2e}.text-N0751{color:#efe0cc}.bg-N0751{background-color:#efe0cc}.border-N0751{border-color:#efe0cc}.text-N0752{color:#dec8ac}.bg-N0752{background-color:#dec8ac}.border-N0752{border-color:#dec8ac}.text-N0753{color:#cdb18c}.bg-N0753{background-color:#cdb18c}.border-N0753{border-color:#cdb18c}.text-N0754{color:#bb9b6c}.bg-N0754{background-color:#bb9b6c}.border-N0754{border-color:#bb9b6c}.text-N0755{color:#a9854e}.bg-N0755{background-color:#a9854e}.border-N0755{border-color:#a9854e}.text-N0756{color:#8f7145}.bg-N0756{background-color:#8f7145}.border-N0756{border-color:#8f7145}.text-N0757{color:#765f3d}.bg-N0757{background-color:#765f3d}.border-N0757{border-color:#765f3d}.text-N0758{color:#5e4d34}.bg-N0758{background-color:#5e4d34}.border-N0758{border-color:#5e4d34}.text-N0759{color:#473c2c}.bg-N0759{background-color:#473c2c}.border-N0759{border-color:#473c2c}.text-N0901{color:#eae2cb}.bg-N0901{background-color:#eae2cb}.border-N0901{border-color:#eae2cb}.text-N0902{color:#d6cbaa}.bg-N0902{background-color:#d6cbaa}.border-N0902{border-color:#d6cbaa}.text-N0903{color:#c2b58a}.bg-N0903{background-color:#c2b58a}.border-N0903{border-color:#c2b58a}.text-N0904{color:#af9f6a}.bg-N0904{background-color:#af9f6a}.border-N0904{border-color:#af9f6a}.text-N0905{color:#9b8a4b}.bg-N0905{background-color:#9b8a4b}.border-N0905{border-color:#9b8a4b}.text-N0906{color:#847643}.bg-N0906{background-color:#847643}.border-N0906{border-color:#847643}.text-N0907{color:#6d623b}.bg-N0907{background-color:#6d623b}.border-N0907{border-color:#6d623b}.text-N0908{color:#584f33}.bg-N0908{background-color:#584f33}.border-N0908{border-color:#584f33}.text-N0909{color:#433d2b}.bg-N0909{background-color:#433d2b}.border-N0909{border-color:#433d2b}.text-N1051{color:#e3e4cc}.bg-N1051{background-color:#e3e4cc}.border-N1051{border-color:#e3e4cc}.text-N1052{color:#cdceab}.bg-N1052{background-color:#cdceab}.border-N1052{border-color:#cdceab}.text-N1053{color:#b7b98b}.bg-N1053{background-color:#b7b98b}.border-N1053{border-color:#b7b98b}.text-N1054{color:#a1a46b}.bg-N1054{background-color:#a1a46b}.border-N1054{border-color:#a1a46b}.text-N1055{color:#8b8f4c}.bg-N1055{background-color:#8b8f4c}.border-N1055{border-color:#8b8f4c}.text-N1056{color:#777a44}.bg-N1056{background-color:#777a44}.border-N1056{border-color:#777a44}.text-N1057{color:#63663c}.bg-N1057{background-color:#63663c}.border-N1057{border-color:#63663c}.text-N1058{color:#505234}.bg-N1058{background-color:#505234}.border-N1058{border-color:#505234}.text-N1059{color:#3e3f2c}.bg-N1059{background-color:#3e3f2c}.border-N1059{border-color:#3e3f2c}.text-N1201{color:#dde6ce}.bg-N1201{background-color:#dde6ce}.border-N1201{border-color:#dde6ce}.text-N1202{color:#c4d1ae}.bg-N1202{background-color:#c4d1ae}.border-N1202{border-color:#c4d1ae}.text-N1203{color:#abbc8f}.bg-N1203{background-color:#abbc8f}.border-N1203{border-color:#abbc8f}.text-N1204{color:#92a870}.bg-N1204{background-color:#92a870}.border-N1204{border-color:#92a870}.text-N1205{color:#7a9453}.bg-N1205{background-color:#7a9453}.border-N1205{border-color:#7a9453}.text-N1206{color:#697e49}.bg-N1206{background-color:#697e49}.border-N1206{border-color:#697e49}.text-N1207{color:#586840}.bg-N1207{background-color:#586840}.border-N1207{border-color:#586840}.text-N1208{color:#485437}.bg-N1208{background-color:#485437}.border-N1208{border-color:#485437}.text-N1209{color:#39402d}.bg-N1209{background-color:#39402d}.border-N1209{border-color:#39402d}.text-N1351{color:#d7e7d2}.bg-N1351{background-color:#d7e7d2}.border-N1351{border-color:#d7e7d2}.text-N1352{color:#bbd3b3}.bg-N1352{background-color:#bbd3b3}.border-N1352{border-color:#bbd3b3}.text-N1353{color:#9fbf96}.bg-N1353{background-color:#9fbf96}.border-N1353{border-color:#9fbf96}.text-N1354{color:#83ab79}.bg-N1354{background-color:#83ab79}.border-N1354{border-color:#83ab79}.text-N1355{color:#68975d}.bg-N1355{background-color:#68975d}.border-N1355{border-color:#68975d}.text-N1356{color:#5a8151}.bg-N1356{background-color:#5a8151}.border-N1356{border-color:#5a8151}.text-N1357{color:#4d6b46}.bg-N1357{background-color:#4d6b46}.border-N1357{border-color:#4d6b46}.text-N1358{color:#40553b}.bg-N1358{background-color:#40553b}.border-N1358{border-color:#40553b}.text-N1359{color:#344130}.bg-N1359{background-color:#344130}.border-N1359{border-color:#344130}.text-N1501{color:#d1e8d6}.bg-N1501{background-color:#d1e8d6}.border-N1501{border-color:#d1e8d6}.text-N1502{color:#b2d4ba}.bg-N1502{background-color:#b2d4ba}.border-N1502{border-color:#b2d4ba}.text-N1503{color:#93c19f}.bg-N1503{background-color:#93c19f}.border-N1503{border-color:#93c19f}.text-N1504{color:#74ad84}.bg-N1504{background-color:#74ad84}.border-N1504{border-color:#74ad84}.text-N1505{color:#559a6a}.bg-N1505{background-color:#559a6a}.border-N1505{border-color:#559a6a}.text-N1506{color:#4b835c}.bg-N1506{background-color:#4b835c}.border-N1506{border-color:#4b835c}.text-N1507{color:#426c4e}.bg-N1507{background-color:#426c4e}.border-N1507{border-color:#426c4e}.text-N1508{color:#395741}.bg-N1508{background-color:#395741}.border-N1508{border-color:#395741}.text-N1509{color:#2f4234}.bg-N1509{background-color:#2f4234}.border-N1509{border-color:#2f4234}.text-N1651{color:#cde9dc}.bg-N1651{background-color:#cde9dc}.border-N1651{border-color:#cde9dc}.text-N1652{color:#abd6c2}.bg-N1652{background-color:#abd6c2}.border-N1652{border-color:#abd6c2}.text-N1653{color:#89c2a9}.bg-N1653{background-color:#89c2a9}.border-N1653{border-color:#89c2a9}.text-N1654{color:#66af91}.bg-N1654{background-color:#66af91}.border-N1654{border-color:#66af91}.text-N1655{color:#409b7a}.bg-N1655{background-color:#409b7a}.border-N1655{border-color:#409b7a}.text-N1656{color:#3c8469}.bg-N1656{background-color:#3c8469}.border-N1656{border-color:#3c8469}.text-N1657{color:#376d58}.bg-N1657{background-color:#376d58}.border-N1657{border-color:#376d58}.text-N1658{color:#315848}.bg-N1658{background-color:#315848}.border-N1658{border-color:#315848}.text-N1659{color:#2b4338}.bg-N1659{background-color:#2b4338}.border-N1659{border-color:#2b4338}.text-N1801{color:#c9e9e2}.bg-N1801{background-color:#c9e9e2}.border-N1801{border-color:#c9e9e2}.text-N1802{color:#a6d6cb}.bg-N1802{background-color:#a6d6cb}.border-N1802{border-color:#a6d6cb}.text-N1803{color:#81c3b5}.bg-N1803{background-color:#81c3b5}.border-N1803{border-color:#81c3b5}.text-N1804{color:#5baf9f}.bg-N1804{background-color:#5baf9f}.border-N1804{border-color:#5baf9f}.text-N1805{color:#2a9c8a}.bg-N1805{background-color:#2a9c8a}.border-N1805{border-color:#2a9c8a}.text-N1806{color:#2d8576}.bg-N1806{background-color:#2d8576}.border-N1806{border-color:#2d8576}.text-N1807{color:#2d6e62}.bg-N1807{background-color:#2d6e62}.border-N1807{border-color:#2d6e62}.text-N1808{color:#2b584f}.bg-N1808{background-color:#2b584f}.border-N1808{border-color:#2b584f}.text-N1809{color:#28433d}.bg-N1809{background-color:#28433d}.border-N1809{border-color:#28433d}.text-N1951{color:#c8e9e8}.bg-N1951{background-color:#c8e9e8}.border-N1951{border-color:#c8e9e8}.text-N1952{color:#a3d6d4}.bg-N1952{background-color:#a3d6d4}.border-N1952{border-color:#a3d6d4}.text-N1953{color:#7dc3c0}.bg-N1953{background-color:#7dc3c0}.border-N1953{border-color:#7dc3c0}.text-N1954{color:#53afad}.bg-N1954{background-color:#53afad}.border-N1954{border-color:#53afad}.text-N1955{color:#109c9a}.bg-N1955{background-color:#109c9a}.border-N1955{border-color:#109c9a}.text-N1956{color:#208583}.bg-N1956{background-color:#208583}.border-N1956{border-color:#208583}.text-N1957{color:#266e6d}.bg-N1957{background-color:#266e6d}.border-N1957{border-color:#266e6d}.text-N1958{color:#275857}.bg-N1958{background-color:#275857}.border-N1958{border-color:#275857}.text-N1959{color:#264342}.bg-N1959{background-color:#264342}.border-N1959{border-color:#264342}.text-N2101{color:#c8e9ed}.bg-N2101{background-color:#c8e9ed}.border-N2101{border-color:#c8e9ed}.text-N2102{color:#a3d5dc}.bg-N2102{background-color:#a3d5dc}.border-N2102{border-color:#a3d5dc}.text-N2103{color:#7dc2cb}.bg-N2103{background-color:#7dc2cb}.border-N2103{border-color:#7dc2cb}.text-N2104{color:#52aeba}.bg-N2104{background-color:#52aeba}.border-N2104{border-color:#52aeba}.text-N2105{color:#019baa}.bg-N2105{background-color:#019baa}.border-N2105{border-color:#019baa}.text-N2106{color:#1c8490}.bg-N2106{background-color:#1c8490}.border-N2106{border-color:#1c8490}.text-N2107{color:#246d76}.bg-N2107{background-color:#246d76}.border-N2107{border-color:#246d76}.text-N2108{color:#27575e}.bg-N2108{background-color:#27575e}.border-N2108{border-color:#27575e}.text-N2109{color:#264246}.bg-N2109{background-color:#264246}.border-N2109{border-color:#264246}.text-N2251{color:#cae8f2}.bg-N2251{background-color:#cae8f2}.border-N2251{border-color:#cae8f2}.text-N2252{color:#a6d4e3}.bg-N2252{background-color:#a6d4e3}.border-N2252{border-color:#a6d4e3}.text-N2253{color:#81c0d4}.bg-N2253{background-color:#81c0d4}.border-N2253{border-color:#81c0d4}.text-N2254{color:#58acc6}.bg-N2254{background-color:#58acc6}.border-N2254{border-color:#58acc6}.text-N2255{color:#1a99b7}.bg-N2255{background-color:#1a99b7}.border-N2255{border-color:#1a99b7}.text-N2256{color:#25829a}.bg-N2256{background-color:#25829a}.border-N2256{border-color:#25829a}.text-N2257{color:#2a6c7e}.bg-N2257{background-color:#2a6c7e}.border-N2257{border-color:#2a6c7e}.text-N2258{color:#2a5664}.bg-N2258{background-color:#2a5664}.border-N2258{border-color:#2a5664}.text-N2259{color:#27424a}.bg-N2259{background-color:#27424a}.border-N2259{border-color:#27424a}.text-N2401{color:#cee6f6}.bg-N2401{background-color:#cee6f6}.border-N2401{border-color:#cee6f6}.text-N2402{color:#acd2e9}.bg-N2402{background-color:#acd2e9}.border-N2402{border-color:#acd2e9}.text-N2403{color:#8abedc}.bg-N2403{background-color:#8abedc}.border-N2403{border-color:#8abedc}.text-N2404{color:#65aace}.bg-N2404{background-color:#65aace}.border-N2404{border-color:#65aace}.text-N2405{color:#3696c1}.bg-N2405{background-color:#3696c1}.border-N2405{border-color:#3696c1}.text-N2406{color:#3680a3}.bg-N2406{background-color:#3680a3}.border-N2406{border-color:#3680a3}.text-N2407{color:#346a85}.bg-N2407{background-color:#346a85}.border-N2407{border-color:#346a85}.text-N2408{color:#305568}.bg-N2408{background-color:#305568}.border-N2408{border-color:#305568}.text-N2409{color:#2b414d}.bg-N2409{background-color:#2b414d}.border-N2409{border-color:#2b414d}.text-N2551{color:#d3e5f8}.bg-N2551{background-color:#d3e5f8}.border-N2551{border-color:#d3e5f8}.text-N2552{color:#b5cfec}.bg-N2552{background-color:#b5cfec}.border-N2552{border-color:#b5cfec}.text-N2553{color:#95bbe0}.bg-N2553{background-color:#95bbe0}.border-N2553{border-color:#95bbe0}.text-N2554{color:#75a6d4}.bg-N2554{background-color:#75a6d4}.border-N2554{border-color:#75a6d4}.text-N2555{color:#5192c8}.bg-N2555{background-color:#5192c8}.border-N2555{border-color:#5192c8}.text-N2556{color:#497ca8}.bg-N2556{background-color:#497ca8}.border-N2556{border-color:#497ca8}.text-N2557{color:#416789}.bg-N2557{background-color:#416789}.border-N2557{border-color:#416789}.text-N2558{color:#39536b}.bg-N2558{background-color:#39536b}.border-N2558{border-color:#39536b}.text-N2559{color:#303f4f}.bg-N2559{background-color:#303f4f}.border-N2559{border-color:#303f4f}.text-N2701{color:#dae3f9}.bg-N2701{background-color:#dae3f9}.border-N2701{border-color:#dae3f9}.text-N2702{color:#becdee}.bg-N2702{background-color:#becdee}.border-N2702{border-color:#becdee}.text-N2703{color:#a3b7e2}.bg-N2703{background-color:#a3b7e2}.border-N2703{border-color:#a3b7e2}.text-N2704{color:#87a2d6}.bg-N2704{background-color:#87a2d6}.border-N2704{border-color:#87a2d6}.text-N2705{color:#6a8dca}.bg-N2705{background-color:#6a8dca}.border-N2705{border-color:#6a8dca}.text-N2706{color:#5d78aa}.bg-N2706{background-color:#5d78aa}.border-N2706{border-color:#5d78aa}.text-N2707{color:#4f648b}.bg-N2707{background-color:#4f648b}.border-N2707{border-color:#4f648b}.text-N2708{color:#42516c}.bg-N2708{background-color:#42516c}.border-N2708{border-color:#42516c}.text-N2709{color:#353e50}.bg-N2709{background-color:#353e50}.border-N2709{border-color:#353e50}.text-N2851{color:#e0e1f9}.bg-N2851{background-color:#e0e1f9}.border-N2851{border-color:#e0e1f9}.text-N2852{color:#c8caed}.bg-N2852{background-color:#c8caed}.border-N2852{border-color:#c8caed}.text-N2853{color:#b1b3e1}.bg-N2853{background-color:#b1b3e1}.border-N2853{border-color:#b1b3e1}.text-N2854{color:#999dd5}.bg-N2854{background-color:#999dd5}.border-N2854{border-color:#999dd5}.text-N2855{color:#8188c8}.bg-N2855{background-color:#8188c8}.border-N2855{border-color:#8188c8}.text-N2856{color:#6f74a8}.bg-N2856{background-color:#6f74a8}.border-N2856{border-color:#6f74a8}.text-N2857{color:#5d6189}.bg-N2857{background-color:#5d6189}.border-N2857{border-color:#5d6189}.text-N2858{color:#4c4e6c}.bg-N2858{background-color:#4c4e6c}.border-N2858{border-color:#4c4e6c}.text-N2859{color:#3b3c4f}.bg-N2859{background-color:#3b3c4f}.border-N2859{border-color:#3b3c4f}.text-N3001{color:#e7dff6}.bg-N3001{background-color:#e7dff6}.border-N3001{border-color:#e7dff6}.text-N3002{color:#d3c7e9}.bg-N3002{background-color:#d3c7e9}.border-N3002{border-color:#d3c7e9}.text-N3003{color:#beafdc}.bg-N3003{background-color:#beafdc}.border-N3003{border-color:#beafdc}.text-N3004{color:#aa98cf}.bg-N3004{background-color:#aa98cf}.border-N3004{border-color:#aa98cf}.text-N3005{color:#9582c2}.bg-N3005{background-color:#9582c2}.border-N3005{border-color:#9582c2}.text-N3006{color:#7f6fa3}.bg-N3006{background-color:#7f6fa3}.border-N3006{border-color:#7f6fa3}.text-N3007{color:#6a5d86}.bg-N3007{background-color:#6a5d86}.border-N3007{border-color:#6a5d86}.text-N3008{color:#554c69}.bg-N3008{background-color:#554c69}.border-N3008{border-color:#554c69}.text-N3009{color:#413b4d}.bg-N3009{background-color:#413b4d}.border-N3009{border-color:#413b4d}.text-N3151{color:#edddf3}.bg-N3151{background-color:#edddf3}.border-N3151{border-color:#edddf3}.text-N3152{color:#dcc4e4}.bg-N3152{background-color:#dcc4e4}.border-N3152{border-color:#dcc4e4}.text-N3153{color:#caacd6}.bg-N3153{background-color:#caacd6}.border-N3153{border-color:#caacd6}.text-N3154{color:#b994c7}.bg-N3154{background-color:#b994c7}.border-N3154{border-color:#b994c7}.text-N3155{color:#a77cb9}.bg-N3155{background-color:#a77cb9}.border-N3155{border-color:#a77cb9}.text-N3156{color:#8d6b9c}.bg-N3156{background-color:#8d6b9c}.border-N3156{border-color:#8d6b9c}.text-N3157{color:#755a7f}.bg-N3157{background-color:#755a7f}.border-N3157{border-color:#755a7f}.text-N3158{color:#5d4964}.bg-N3158{background-color:#5d4964}.border-N3158{border-color:#5d4964}.text-N3159{color:#46394b}.bg-N3159{background-color:#46394b}.border-N3159{border-color:#46394b}.text-N3301{color:#f3dcee}.bg-N3301{background-color:#f3dcee}.border-N3301{border-color:#f3dcee}.text-N3302{color:#e3c2dd}.bg-N3302{background-color:#e3c2dd}.border-N3302{border-color:#e3c2dd}.text-N3303{color:#d4a9cd}.bg-N3303{background-color:#d4a9cd}.border-N3303{border-color:#d4a9cd}.text-N3304{color:#c590bc}.bg-N3304{background-color:#c590bc}.border-N3304{border-color:#c590bc}.text-N3305{color:#b577ac}.bg-N3305{background-color:#b577ac}.border-N3305{border-color:#b577ac}.text-N3306{color:#996791}.bg-N3306{background-color:#996791}.border-N3306{border-color:#996791}.text-N3307{color:#7d5777}.bg-N3307{background-color:#7d5777}.border-N3307{border-color:#7d5777}.text-N3308{color:#63475f}.bg-N3308{background-color:#63475f}.border-N3308{border-color:#63475f}.text-N3309{color:#4a3847}.bg-N3309{background-color:#4a3847}.border-N3309{border-color:#4a3847}.text-N3451{color:#f7dbe9}.bg-N3451{background-color:#f7dbe9}.border-N3451{border-color:#f7dbe9}.text-N3452{color:#e9c1d5}.bg-N3452{background-color:#e9c1d5}.border-N3452{border-color:#e9c1d5}.text-N3453{color:#dba7c2}.bg-N3453{background-color:#dba7c2}.border-N3453{border-color:#dba7c2}.text-N3454{color:#cd8daf}.bg-N3454{background-color:#cd8daf}.border-N3454{border-color:#cd8daf}.text-N3455{color:#bf739d}.bg-N3455{background-color:#bf739d}.border-N3455{border-color:#bf739d}.text-N3456{color:#a16485}.bg-N3456{background-color:#a16485}.border-N3456{border-color:#a16485}.text-N3457{color:#84546e}.bg-N3457{background-color:#84546e}.border-N3457{border-color:#84546e}.text-N3458{color:#684658}.bg-N3458{background-color:#684658}.border-N3458{border-color:#684658}.text-N3459{color:#4d3743}.bg-N3459{background-color:#4d3743}.border-N3459{border-color:#4d3743}.text-N3601{color:#f9dbe3}.bg-N3601{background-color:#f9dbe3}.border-N3601{border-color:#f9dbe3}.text-N3602{color:#edc0cd}.bg-N3602{background-color:#edc0cd}.border-N3602{border-color:#edc0cd}.text-N3603{color:#e0a6b7}.bg-N3603{background-color:#e0a6b7}.border-N3603{border-color:#e0a6b7}.text-N3604{color:#d38ca2}.bg-N3604{background-color:#d38ca2}.border-N3604{border-color:#d38ca2}.text-N3605{color:#c5728d}.bg-N3605{background-color:#c5728d}.border-N3605{border-color:#c5728d}.text-N3606{color:#a66278}.bg-N3606{background-color:#a66278}.border-N3606{border-color:#a66278}.text-N3607{color:#885464}.bg-N3607{background-color:#885464}.border-N3607{border-color:#885464}.text-N3608{color:#6b4551}.bg-N3608{background-color:#6b4551}.border-N3608{border-color:#6b4551}.text-N3609{color:#4f373e}.bg-N3609{background-color:#4f373e}.border-N3609{border-color:#4f373e}:root{--color-N0001:#e2e2e2;--color-N0002:#ccc;--color-N0003:#b6b6b6;--color-N0004:#a0a0a0;--color-N0005:#8b8b8b;--color-N0006:#777;--color-N0007:#636363;--color-N0008:#505050;--color-N0009:#3e3e3e;--color-N0151:#fadbdd;--color-N0152:#eec0c4;--color-N0153:#e2a6ac;--color-N0154:#d48c94;--color-N0155:#c6727d;--color-N0156:#a7636b;--color-N0157:#89545a;--color-N0158:#6b4549;--color-N0159:#4f3739;--color-N0301:#fadbd7;--color-N0302:#edc1bc;--color-N0303:#e0a8a1;--color-N0304:#d28e87;--color-N0305:#c4756e;--color-N0306:#a5655f;--color-N0307:#875650;--color-N0308:#6b4642;--color-N0309:#4f3835;--color-N0451:#f8dcd3;--color-N0452:#eac3b5;--color-N0453:#dcaa98;--color-N0454:#cd927c;--color-N0455:#be7960;--color-N0456:#a06954;--color-N0457:#845848;--color-N0458:#68483c;--color-N0459:#4d3931;--color-N0601:#f4decf;--color-N0602:#e5c6af;--color-N0603:#d5ad90;--color-N0604:#c59672;--color-N0605:#b57f55;--color-N0606:#996d4b;--color-N0607:#7e5b41;--color-N0608:#644a38;--color-N0609:#4a3a2e;--color-N0751:#efe0cc;--color-N0752:#dec8ac;--color-N0753:#cdb18c;--color-N0754:#bb9b6c;--color-N0755:#a9854e;--color-N0756:#8f7145;--color-N0757:#765f3d;--color-N0758:#5e4d34;--color-N0759:#473c2c;--color-N0901:#eae2cb;--color-N0902:#d6cbaa;--color-N0903:#c2b58a;--color-N0904:#af9f6a;--color-N0905:#9b8a4b;--color-N0906:#847643;--color-N0907:#6d623b;--color-N0908:#584f33;--color-N0909:#433d2b;--color-N1051:#e3e4cc;--color-N1052:#cdceab;--color-N1053:#b7b98b;--color-N1054:#a1a46b;--color-N1055:#8b8f4c;--color-N1056:#777a44;--color-N1057:#63663c;--color-N1058:#505234;--color-N1059:#3e3f2c;--color-N1201:#dde6ce;--color-N1202:#c4d1ae;--color-N1203:#abbc8f;--color-N1204:#92a870;--color-N1205:#7a9453;--color-N1206:#697e49;--color-N1207:#586840;--color-N1208:#485437;--color-N1209:#39402d;--color-N1351:#d7e7d2;--color-N1352:#bbd3b3;--color-N1353:#9fbf96;--color-N1354:#83ab79;--color-N1355:#68975d;--color-N1356:#5a8151;--color-N1357:#4d6b46;--color-N1358:#40553b;--color-N1359:#344130;--color-N1501:#d1e8d6;--color-N1502:#b2d4ba;--color-N1503:#93c19f;--color-N1504:#74ad84;--color-N1505:#559a6a;--color-N1506:#4b835c;--color-N1507:#426c4e;--color-N1508:#395741;--color-N1509:#2f4234;--color-N1651:#cde9dc;--color-N1652:#abd6c2;--color-N1653:#89c2a9;--color-N1654:#66af91;--color-N1655:#409b7a;--color-N1656:#3c8469;--color-N1657:#376d58;--color-N1658:#315848;--color-N1659:#2b4338;--color-N1801:#c9e9e2;--color-N1802:#a6d6cb;--color-N1803:#81c3b5;--color-N1804:#5baf9f;--color-N1805:#2a9c8a;--color-N1806:#2d8576;--color-N1807:#2d6e62;--color-N1808:#2b584f;--color-N1809:#28433d;--color-N1951:#c8e9e8;--color-N1952:#a3d6d4;--color-N1953:#7dc3c0;--color-N1954:#53afad;--color-N1955:#109c9a;--color-N1956:#208583;--color-N1957:#266e6d;--color-N1958:#275857;--color-N1959:#264342;--color-N2101:#c8e9ed;--color-N2102:#a3d5dc;--color-N2103:#7dc2cb;--color-N2104:#52aeba;--color-N2105:#019baa;--color-N2106:#1c8490;--color-N2107:#246d76;--color-N2108:#27575e;--color-N2109:#264246;--color-N2251:#cae8f2;--color-N2252:#a6d4e3;--color-N2253:#81c0d4;--color-N2254:#58acc6;--color-N2255:#1a99b7;--color-N2256:#25829a;--color-N2257:#2a6c7e;--color-N2258:#2a5664;--color-N2259:#27424a;--color-N2401:#cee6f6;--color-N2402:#acd2e9;--color-N2403:#8abedc;--color-N2404:#65aace;--color-N2405:#3696c1;--color-N2406:#3680a3;--color-N2407:#346a85;--color-N2408:#305568;--color-N2409:#2b414d;--color-N2551:#d3e5f8;--color-N2552:#b5cfec;--color-N2553:#95bbe0;--color-N2554:#75a6d4;--color-N2555:#5192c8;--color-N2556:#497ca8;--color-N2557:#416789;--color-N2558:#39536b;--color-N2559:#303f4f;--color-N2701:#dae3f9;--color-N2702:#becdee;--color-N2703:#a3b7e2;--color-N2704:#87a2d6;--color-N2705:#6a8dca;--color-N2706:#5d78aa;--color-N2707:#4f648b;--color-N2708:#42516c;--color-N2709:#353e50;--color-N2851:#e0e1f9;--color-N2852:#c8caed;--color-N2853:#b1b3e1;--color-N2854:#999dd5;--color-N2855:#8188c8;--color-N2856:#6f74a8;--color-N2857:#5d6189;--color-N2858:#4c4e6c;--color-N2859:#3b3c4f;--color-N3001:#e7dff6;--color-N3002:#d3c7e9;--color-N3003:#beafdc;--color-N3004:#aa98cf;--color-N3005:#9582c2;--color-N3006:#7f6fa3;--color-N3007:#6a5d86;--color-N3008:#554c69;--color-N3009:#413b4d;--color-N3151:#edddf3;--color-N3152:#dcc4e4;--color-N3153:#caacd6;--color-N3154:#b994c7;--color-N3155:#a77cb9;--color-N3156:#8d6b9c;--color-N3157:#755a7f;--color-N3158:#5d4964;--color-N3159:#46394b;--color-N3301:#f3dcee;--color-N3302:#e3c2dd;--color-N3303:#d4a9cd;--color-N3304:#c590bc;--color-N3305:#b577ac;--color-N3306:#996791;--color-N3307:#7d5777;--color-N3308:#63475f;--color-N3309:#4a3847;--color-N3451:#f7dbe9;--color-N3452:#e9c1d5;--color-N3453:#dba7c2;--color-N3454:#cd8daf;--color-N3455:#bf739d;--color-N3456:#a16485;--color-N3457:#84546e;--color-N3458:#684658;--color-N3459:#4d3743;--color-N3601:#f9dbe3;--color-N3602:#edc0cd;--color-N3603:#e0a6b7;--color-N3604:#d38ca2;--color-N3605:#c5728d;--color-N3606:#a66278;--color-N3607:#885464;--color-N3608:#6b4551;--color-N3609:#4f373e} +:root{--color-N0001:#e2e2e2;--color-N0002:#ccc;--color-N0003:#b6b6b6;--color-N0004:#a0a0a0;--color-N0005:#8b8b8b;--color-N0006:#777;--color-N0007:#636363;--color-N0008:#505050;--color-N0009:#3e3e3e;--color-N0151:#fadbdd;--color-N0152:#eec0c4;--color-N0153:#e2a6ac;--color-N0154:#d48c94;--color-N0155:#c6727d;--color-N0156:#a7636b;--color-N0157:#89545a;--color-N0158:#6b4549;--color-N0159:#4f3739;--color-N0301:#fadbd7;--color-N0302:#edc1bc;--color-N0303:#e0a8a1;--color-N0304:#d28e87;--color-N0305:#c4756e;--color-N0306:#a5655f;--color-N0307:#875650;--color-N0308:#6b4642;--color-N0309:#4f3835;--color-N0451:#f8dcd3;--color-N0452:#eac3b5;--color-N0453:#dcaa98;--color-N0454:#cd927c;--color-N0455:#be7960;--color-N0456:#a06954;--color-N0457:#845848;--color-N0458:#68483c;--color-N0459:#4d3931;--color-N0601:#f4decf;--color-N0602:#e5c6af;--color-N0603:#d5ad90;--color-N0604:#c59672;--color-N0605:#b57f55;--color-N0606:#996d4b;--color-N0607:#7e5b41;--color-N0608:#644a38;--color-N0609:#4a3a2e;--color-N0751:#efe0cc;--color-N0752:#dec8ac;--color-N0753:#cdb18c;--color-N0754:#bb9b6c;--color-N0755:#a9854e;--color-N0756:#8f7145;--color-N0757:#765f3d;--color-N0758:#5e4d34;--color-N0759:#473c2c;--color-N0901:#eae2cb;--color-N0902:#d6cbaa;--color-N0903:#c2b58a;--color-N0904:#af9f6a;--color-N0905:#9b8a4b;--color-N0906:#847643;--color-N0907:#6d623b;--color-N0908:#584f33;--color-N0909:#433d2b;--color-N1051:#e3e4cc;--color-N1052:#cdceab;--color-N1053:#b7b98b;--color-N1054:#a1a46b;--color-N1055:#8b8f4c;--color-N1056:#777a44;--color-N1057:#63663c;--color-N1058:#505234;--color-N1059:#3e3f2c;--color-N1201:#dde6ce;--color-N1202:#c4d1ae;--color-N1203:#abbc8f;--color-N1204:#92a870;--color-N1205:#7a9453;--color-N1206:#697e49;--color-N1207:#586840;--color-N1208:#485437;--color-N1209:#39402d;--color-N1351:#d7e7d2;--color-N1352:#bbd3b3;--color-N1353:#9fbf96;--color-N1354:#83ab79;--color-N1355:#68975d;--color-N1356:#5a8151;--color-N1357:#4d6b46;--color-N1358:#40553b;--color-N1359:#344130;--color-N1501:#d1e8d6;--color-N1502:#b2d4ba;--color-N1503:#93c19f;--color-N1504:#74ad84;--color-N1505:#559a6a;--color-N1506:#4b835c;--color-N1507:#426c4e;--color-N1508:#395741;--color-N1509:#2f4234;--color-N1651:#cde9dc;--color-N1652:#abd6c2;--color-N1653:#89c2a9;--color-N1654:#66af91;--color-N1655:#409b7a;--color-N1656:#3c8469;--color-N1657:#376d58;--color-N1658:#315848;--color-N1659:#2b4338;--color-N1801:#c9e9e2;--color-N1802:#a6d6cb;--color-N1803:#81c3b5;--color-N1804:#5baf9f;--color-N1805:#2a9c8a;--color-N1806:#2d8576;--color-N1807:#2d6e62;--color-N1808:#2b584f;--color-N1809:#28433d;--color-N1951:#c8e9e8;--color-N1952:#a3d6d4;--color-N1953:#7dc3c0;--color-N1954:#53afad;--color-N1955:#109c9a;--color-N1956:#208583;--color-N1957:#266e6d;--color-N1958:#275857;--color-N1959:#264342;--color-N2101:#c8e9ed;--color-N2102:#a3d5dc;--color-N2103:#7dc2cb;--color-N2104:#52aeba;--color-N2105:#019baa;--color-N2106:#1c8490;--color-N2107:#246d76;--color-N2108:#27575e;--color-N2109:#264246;--color-N2251:#cae8f2;--color-N2252:#a6d4e3;--color-N2253:#81c0d4;--color-N2254:#58acc6;--color-N2255:#1a99b7;--color-N2256:#25829a;--color-N2257:#2a6c7e;--color-N2258:#2a5664;--color-N2259:#27424a;--color-N2401:#cee6f6;--color-N2402:#acd2e9;--color-N2403:#8abedc;--color-N2404:#65aace;--color-N2405:#3696c1;--color-N2406:#3680a3;--color-N2407:#346a85;--color-N2408:#305568;--color-N2409:#2b414d;--color-N2551:#d3e5f8;--color-N2552:#b5cfec;--color-N2553:#95bbe0;--color-N2554:#75a6d4;--color-N2555:#5192c8;--color-N2556:#497ca8;--color-N2557:#416789;--color-N2558:#39536b;--color-N2559:#303f4f;--color-N2701:#dae3f9;--color-N2702:#becdee;--color-N2703:#a3b7e2;--color-N2704:#87a2d6;--color-N2705:#6a8dca;--color-N2706:#5d78aa;--color-N2707:#4f648b;--color-N2708:#42516c;--color-N2709:#353e50;--color-N2851:#e0e1f9;--color-N2852:#c8caed;--color-N2853:#b1b3e1;--color-N2854:#999dd5;--color-N2855:#8188c8;--color-N2856:#6f74a8;--color-N2857:#5d6189;--color-N2858:#4c4e6c;--color-N2859:#3b3c4f;--color-N3001:#e7dff6;--color-N3002:#d3c7e9;--color-N3003:#beafdc;--color-N3004:#aa98cf;--color-N3005:#9582c2;--color-N3006:#7f6fa3;--color-N3007:#6a5d86;--color-N3008:#554c69;--color-N3009:#413b4d;--color-N3151:#edddf3;--color-N3152:#dcc4e4;--color-N3153:#caacd6;--color-N3154:#b994c7;--color-N3155:#a77cb9;--color-N3156:#8d6b9c;--color-N3157:#755a7f;--color-N3158:#5d4964;--color-N3159:#46394b;--color-N3301:#f3dcee;--color-N3302:#e3c2dd;--color-N3303:#d4a9cd;--color-N3304:#c590bc;--color-N3305:#b577ac;--color-N3306:#996791;--color-N3307:#7d5777;--color-N3308:#63475f;--color-N3309:#4a3847;--color-N3451:#f7dbe9;--color-N3452:#e9c1d5;--color-N3453:#dba7c2;--color-N3454:#cd8daf;--color-N3455:#bf739d;--color-N3456:#a16485;--color-N3457:#84546e;--color-N3458:#684658;--color-N3459:#4d3743;--color-N3601:#f9dbe3;--color-N3602:#edc0cd;--color-N3603:#e0a6b7;--color-N3604:#d38ca2;--color-N3605:#c5728d;--color-N3606:#a66278;--color-N3607:#885464;--color-N3608:#6b4551;--color-N3609:#4f373e}.text-N0001{color:#e2e2e2}.bg-N0001{background-color:#e2e2e2}.border-N0001{border-color:#e2e2e2}.text-N0002{color:#ccc}.bg-N0002{background-color:#ccc}.border-N0002{border-color:#ccc}.text-N0003{color:#b6b6b6}.bg-N0003{background-color:#b6b6b6}.border-N0003{border-color:#b6b6b6}.text-N0004{color:#a0a0a0}.bg-N0004{background-color:#a0a0a0}.border-N0004{border-color:#a0a0a0}.text-N0005{color:#8b8b8b}.bg-N0005{background-color:#8b8b8b}.border-N0005{border-color:#8b8b8b}.text-N0006{color:#777}.bg-N0006{background-color:#777}.border-N0006{border-color:#777}.text-N0007{color:#636363}.bg-N0007{background-color:#636363}.border-N0007{border-color:#636363}.text-N0008{color:#505050}.bg-N0008{background-color:#505050}.border-N0008{border-color:#505050}.text-N0009{color:#3e3e3e}.bg-N0009{background-color:#3e3e3e}.border-N0009{border-color:#3e3e3e}.text-N0151{color:#fadbdd}.bg-N0151{background-color:#fadbdd}.border-N0151{border-color:#fadbdd}.text-N0152{color:#eec0c4}.bg-N0152{background-color:#eec0c4}.border-N0152{border-color:#eec0c4}.text-N0153{color:#e2a6ac}.bg-N0153{background-color:#e2a6ac}.border-N0153{border-color:#e2a6ac}.text-N0154{color:#d48c94}.bg-N0154{background-color:#d48c94}.border-N0154{border-color:#d48c94}.text-N0155{color:#c6727d}.bg-N0155{background-color:#c6727d}.border-N0155{border-color:#c6727d}.text-N0156{color:#a7636b}.bg-N0156{background-color:#a7636b}.border-N0156{border-color:#a7636b}.text-N0157{color:#89545a}.bg-N0157{background-color:#89545a}.border-N0157{border-color:#89545a}.text-N0158{color:#6b4549}.bg-N0158{background-color:#6b4549}.border-N0158{border-color:#6b4549}.text-N0159{color:#4f3739}.bg-N0159{background-color:#4f3739}.border-N0159{border-color:#4f3739}.text-N0301{color:#fadbd7}.bg-N0301{background-color:#fadbd7}.border-N0301{border-color:#fadbd7}.text-N0302{color:#edc1bc}.bg-N0302{background-color:#edc1bc}.border-N0302{border-color:#edc1bc}.text-N0303{color:#e0a8a1}.bg-N0303{background-color:#e0a8a1}.border-N0303{border-color:#e0a8a1}.text-N0304{color:#d28e87}.bg-N0304{background-color:#d28e87}.border-N0304{border-color:#d28e87}.text-N0305{color:#c4756e}.bg-N0305{background-color:#c4756e}.border-N0305{border-color:#c4756e}.text-N0306{color:#a5655f}.bg-N0306{background-color:#a5655f}.border-N0306{border-color:#a5655f}.text-N0307{color:#875650}.bg-N0307{background-color:#875650}.border-N0307{border-color:#875650}.text-N0308{color:#6b4642}.bg-N0308{background-color:#6b4642}.border-N0308{border-color:#6b4642}.text-N0309{color:#4f3835}.bg-N0309{background-color:#4f3835}.border-N0309{border-color:#4f3835}.text-N0451{color:#f8dcd3}.bg-N0451{background-color:#f8dcd3}.border-N0451{border-color:#f8dcd3}.text-N0452{color:#eac3b5}.bg-N0452{background-color:#eac3b5}.border-N0452{border-color:#eac3b5}.text-N0453{color:#dcaa98}.bg-N0453{background-color:#dcaa98}.border-N0453{border-color:#dcaa98}.text-N0454{color:#cd927c}.bg-N0454{background-color:#cd927c}.border-N0454{border-color:#cd927c}.text-N0455{color:#be7960}.bg-N0455{background-color:#be7960}.border-N0455{border-color:#be7960}.text-N0456{color:#a06954}.bg-N0456{background-color:#a06954}.border-N0456{border-color:#a06954}.text-N0457{color:#845848}.bg-N0457{background-color:#845848}.border-N0457{border-color:#845848}.text-N0458{color:#68483c}.bg-N0458{background-color:#68483c}.border-N0458{border-color:#68483c}.text-N0459{color:#4d3931}.bg-N0459{background-color:#4d3931}.border-N0459{border-color:#4d3931}.text-N0601{color:#f4decf}.bg-N0601{background-color:#f4decf}.border-N0601{border-color:#f4decf}.text-N0602{color:#e5c6af}.bg-N0602{background-color:#e5c6af}.border-N0602{border-color:#e5c6af}.text-N0603{color:#d5ad90}.bg-N0603{background-color:#d5ad90}.border-N0603{border-color:#d5ad90}.text-N0604{color:#c59672}.bg-N0604{background-color:#c59672}.border-N0604{border-color:#c59672}.text-N0605{color:#b57f55}.bg-N0605{background-color:#b57f55}.border-N0605{border-color:#b57f55}.text-N0606{color:#996d4b}.bg-N0606{background-color:#996d4b}.border-N0606{border-color:#996d4b}.text-N0607{color:#7e5b41}.bg-N0607{background-color:#7e5b41}.border-N0607{border-color:#7e5b41}.text-N0608{color:#644a38}.bg-N0608{background-color:#644a38}.border-N0608{border-color:#644a38}.text-N0609{color:#4a3a2e}.bg-N0609{background-color:#4a3a2e}.border-N0609{border-color:#4a3a2e}.text-N0751{color:#efe0cc}.bg-N0751{background-color:#efe0cc}.border-N0751{border-color:#efe0cc}.text-N0752{color:#dec8ac}.bg-N0752{background-color:#dec8ac}.border-N0752{border-color:#dec8ac}.text-N0753{color:#cdb18c}.bg-N0753{background-color:#cdb18c}.border-N0753{border-color:#cdb18c}.text-N0754{color:#bb9b6c}.bg-N0754{background-color:#bb9b6c}.border-N0754{border-color:#bb9b6c}.text-N0755{color:#a9854e}.bg-N0755{background-color:#a9854e}.border-N0755{border-color:#a9854e}.text-N0756{color:#8f7145}.bg-N0756{background-color:#8f7145}.border-N0756{border-color:#8f7145}.text-N0757{color:#765f3d}.bg-N0757{background-color:#765f3d}.border-N0757{border-color:#765f3d}.text-N0758{color:#5e4d34}.bg-N0758{background-color:#5e4d34}.border-N0758{border-color:#5e4d34}.text-N0759{color:#473c2c}.bg-N0759{background-color:#473c2c}.border-N0759{border-color:#473c2c}.text-N0901{color:#eae2cb}.bg-N0901{background-color:#eae2cb}.border-N0901{border-color:#eae2cb}.text-N0902{color:#d6cbaa}.bg-N0902{background-color:#d6cbaa}.border-N0902{border-color:#d6cbaa}.text-N0903{color:#c2b58a}.bg-N0903{background-color:#c2b58a}.border-N0903{border-color:#c2b58a}.text-N0904{color:#af9f6a}.bg-N0904{background-color:#af9f6a}.border-N0904{border-color:#af9f6a}.text-N0905{color:#9b8a4b}.bg-N0905{background-color:#9b8a4b}.border-N0905{border-color:#9b8a4b}.text-N0906{color:#847643}.bg-N0906{background-color:#847643}.border-N0906{border-color:#847643}.text-N0907{color:#6d623b}.bg-N0907{background-color:#6d623b}.border-N0907{border-color:#6d623b}.text-N0908{color:#584f33}.bg-N0908{background-color:#584f33}.border-N0908{border-color:#584f33}.text-N0909{color:#433d2b}.bg-N0909{background-color:#433d2b}.border-N0909{border-color:#433d2b}.text-N1051{color:#e3e4cc}.bg-N1051{background-color:#e3e4cc}.border-N1051{border-color:#e3e4cc}.text-N1052{color:#cdceab}.bg-N1052{background-color:#cdceab}.border-N1052{border-color:#cdceab}.text-N1053{color:#b7b98b}.bg-N1053{background-color:#b7b98b}.border-N1053{border-color:#b7b98b}.text-N1054{color:#a1a46b}.bg-N1054{background-color:#a1a46b}.border-N1054{border-color:#a1a46b}.text-N1055{color:#8b8f4c}.bg-N1055{background-color:#8b8f4c}.border-N1055{border-color:#8b8f4c}.text-N1056{color:#777a44}.bg-N1056{background-color:#777a44}.border-N1056{border-color:#777a44}.text-N1057{color:#63663c}.bg-N1057{background-color:#63663c}.border-N1057{border-color:#63663c}.text-N1058{color:#505234}.bg-N1058{background-color:#505234}.border-N1058{border-color:#505234}.text-N1059{color:#3e3f2c}.bg-N1059{background-color:#3e3f2c}.border-N1059{border-color:#3e3f2c}.text-N1201{color:#dde6ce}.bg-N1201{background-color:#dde6ce}.border-N1201{border-color:#dde6ce}.text-N1202{color:#c4d1ae}.bg-N1202{background-color:#c4d1ae}.border-N1202{border-color:#c4d1ae}.text-N1203{color:#abbc8f}.bg-N1203{background-color:#abbc8f}.border-N1203{border-color:#abbc8f}.text-N1204{color:#92a870}.bg-N1204{background-color:#92a870}.border-N1204{border-color:#92a870}.text-N1205{color:#7a9453}.bg-N1205{background-color:#7a9453}.border-N1205{border-color:#7a9453}.text-N1206{color:#697e49}.bg-N1206{background-color:#697e49}.border-N1206{border-color:#697e49}.text-N1207{color:#586840}.bg-N1207{background-color:#586840}.border-N1207{border-color:#586840}.text-N1208{color:#485437}.bg-N1208{background-color:#485437}.border-N1208{border-color:#485437}.text-N1209{color:#39402d}.bg-N1209{background-color:#39402d}.border-N1209{border-color:#39402d}.text-N1351{color:#d7e7d2}.bg-N1351{background-color:#d7e7d2}.border-N1351{border-color:#d7e7d2}.text-N1352{color:#bbd3b3}.bg-N1352{background-color:#bbd3b3}.border-N1352{border-color:#bbd3b3}.text-N1353{color:#9fbf96}.bg-N1353{background-color:#9fbf96}.border-N1353{border-color:#9fbf96}.text-N1354{color:#83ab79}.bg-N1354{background-color:#83ab79}.border-N1354{border-color:#83ab79}.text-N1355{color:#68975d}.bg-N1355{background-color:#68975d}.border-N1355{border-color:#68975d}.text-N1356{color:#5a8151}.bg-N1356{background-color:#5a8151}.border-N1356{border-color:#5a8151}.text-N1357{color:#4d6b46}.bg-N1357{background-color:#4d6b46}.border-N1357{border-color:#4d6b46}.text-N1358{color:#40553b}.bg-N1358{background-color:#40553b}.border-N1358{border-color:#40553b}.text-N1359{color:#344130}.bg-N1359{background-color:#344130}.border-N1359{border-color:#344130}.text-N1501{color:#d1e8d6}.bg-N1501{background-color:#d1e8d6}.border-N1501{border-color:#d1e8d6}.text-N1502{color:#b2d4ba}.bg-N1502{background-color:#b2d4ba}.border-N1502{border-color:#b2d4ba}.text-N1503{color:#93c19f}.bg-N1503{background-color:#93c19f}.border-N1503{border-color:#93c19f}.text-N1504{color:#74ad84}.bg-N1504{background-color:#74ad84}.border-N1504{border-color:#74ad84}.text-N1505{color:#559a6a}.bg-N1505{background-color:#559a6a}.border-N1505{border-color:#559a6a}.text-N1506{color:#4b835c}.bg-N1506{background-color:#4b835c}.border-N1506{border-color:#4b835c}.text-N1507{color:#426c4e}.bg-N1507{background-color:#426c4e}.border-N1507{border-color:#426c4e}.text-N1508{color:#395741}.bg-N1508{background-color:#395741}.border-N1508{border-color:#395741}.text-N1509{color:#2f4234}.bg-N1509{background-color:#2f4234}.border-N1509{border-color:#2f4234}.text-N1651{color:#cde9dc}.bg-N1651{background-color:#cde9dc}.border-N1651{border-color:#cde9dc}.text-N1652{color:#abd6c2}.bg-N1652{background-color:#abd6c2}.border-N1652{border-color:#abd6c2}.text-N1653{color:#89c2a9}.bg-N1653{background-color:#89c2a9}.border-N1653{border-color:#89c2a9}.text-N1654{color:#66af91}.bg-N1654{background-color:#66af91}.border-N1654{border-color:#66af91}.text-N1655{color:#409b7a}.bg-N1655{background-color:#409b7a}.border-N1655{border-color:#409b7a}.text-N1656{color:#3c8469}.bg-N1656{background-color:#3c8469}.border-N1656{border-color:#3c8469}.text-N1657{color:#376d58}.bg-N1657{background-color:#376d58}.border-N1657{border-color:#376d58}.text-N1658{color:#315848}.bg-N1658{background-color:#315848}.border-N1658{border-color:#315848}.text-N1659{color:#2b4338}.bg-N1659{background-color:#2b4338}.border-N1659{border-color:#2b4338}.text-N1801{color:#c9e9e2}.bg-N1801{background-color:#c9e9e2}.border-N1801{border-color:#c9e9e2}.text-N1802{color:#a6d6cb}.bg-N1802{background-color:#a6d6cb}.border-N1802{border-color:#a6d6cb}.text-N1803{color:#81c3b5}.bg-N1803{background-color:#81c3b5}.border-N1803{border-color:#81c3b5}.text-N1804{color:#5baf9f}.bg-N1804{background-color:#5baf9f}.border-N1804{border-color:#5baf9f}.text-N1805{color:#2a9c8a}.bg-N1805{background-color:#2a9c8a}.border-N1805{border-color:#2a9c8a}.text-N1806{color:#2d8576}.bg-N1806{background-color:#2d8576}.border-N1806{border-color:#2d8576}.text-N1807{color:#2d6e62}.bg-N1807{background-color:#2d6e62}.border-N1807{border-color:#2d6e62}.text-N1808{color:#2b584f}.bg-N1808{background-color:#2b584f}.border-N1808{border-color:#2b584f}.text-N1809{color:#28433d}.bg-N1809{background-color:#28433d}.border-N1809{border-color:#28433d}.text-N1951{color:#c8e9e8}.bg-N1951{background-color:#c8e9e8}.border-N1951{border-color:#c8e9e8}.text-N1952{color:#a3d6d4}.bg-N1952{background-color:#a3d6d4}.border-N1952{border-color:#a3d6d4}.text-N1953{color:#7dc3c0}.bg-N1953{background-color:#7dc3c0}.border-N1953{border-color:#7dc3c0}.text-N1954{color:#53afad}.bg-N1954{background-color:#53afad}.border-N1954{border-color:#53afad}.text-N1955{color:#109c9a}.bg-N1955{background-color:#109c9a}.border-N1955{border-color:#109c9a}.text-N1956{color:#208583}.bg-N1956{background-color:#208583}.border-N1956{border-color:#208583}.text-N1957{color:#266e6d}.bg-N1957{background-color:#266e6d}.border-N1957{border-color:#266e6d}.text-N1958{color:#275857}.bg-N1958{background-color:#275857}.border-N1958{border-color:#275857}.text-N1959{color:#264342}.bg-N1959{background-color:#264342}.border-N1959{border-color:#264342}.text-N2101{color:#c8e9ed}.bg-N2101{background-color:#c8e9ed}.border-N2101{border-color:#c8e9ed}.text-N2102{color:#a3d5dc}.bg-N2102{background-color:#a3d5dc}.border-N2102{border-color:#a3d5dc}.text-N2103{color:#7dc2cb}.bg-N2103{background-color:#7dc2cb}.border-N2103{border-color:#7dc2cb}.text-N2104{color:#52aeba}.bg-N2104{background-color:#52aeba}.border-N2104{border-color:#52aeba}.text-N2105{color:#019baa}.bg-N2105{background-color:#019baa}.border-N2105{border-color:#019baa}.text-N2106{color:#1c8490}.bg-N2106{background-color:#1c8490}.border-N2106{border-color:#1c8490}.text-N2107{color:#246d76}.bg-N2107{background-color:#246d76}.border-N2107{border-color:#246d76}.text-N2108{color:#27575e}.bg-N2108{background-color:#27575e}.border-N2108{border-color:#27575e}.text-N2109{color:#264246}.bg-N2109{background-color:#264246}.border-N2109{border-color:#264246}.text-N2251{color:#cae8f2}.bg-N2251{background-color:#cae8f2}.border-N2251{border-color:#cae8f2}.text-N2252{color:#a6d4e3}.bg-N2252{background-color:#a6d4e3}.border-N2252{border-color:#a6d4e3}.text-N2253{color:#81c0d4}.bg-N2253{background-color:#81c0d4}.border-N2253{border-color:#81c0d4}.text-N2254{color:#58acc6}.bg-N2254{background-color:#58acc6}.border-N2254{border-color:#58acc6}.text-N2255{color:#1a99b7}.bg-N2255{background-color:#1a99b7}.border-N2255{border-color:#1a99b7}.text-N2256{color:#25829a}.bg-N2256{background-color:#25829a}.border-N2256{border-color:#25829a}.text-N2257{color:#2a6c7e}.bg-N2257{background-color:#2a6c7e}.border-N2257{border-color:#2a6c7e}.text-N2258{color:#2a5664}.bg-N2258{background-color:#2a5664}.border-N2258{border-color:#2a5664}.text-N2259{color:#27424a}.bg-N2259{background-color:#27424a}.border-N2259{border-color:#27424a}.text-N2401{color:#cee6f6}.bg-N2401{background-color:#cee6f6}.border-N2401{border-color:#cee6f6}.text-N2402{color:#acd2e9}.bg-N2402{background-color:#acd2e9}.border-N2402{border-color:#acd2e9}.text-N2403{color:#8abedc}.bg-N2403{background-color:#8abedc}.border-N2403{border-color:#8abedc}.text-N2404{color:#65aace}.bg-N2404{background-color:#65aace}.border-N2404{border-color:#65aace}.text-N2405{color:#3696c1}.bg-N2405{background-color:#3696c1}.border-N2405{border-color:#3696c1}.text-N2406{color:#3680a3}.bg-N2406{background-color:#3680a3}.border-N2406{border-color:#3680a3}.text-N2407{color:#346a85}.bg-N2407{background-color:#346a85}.border-N2407{border-color:#346a85}.text-N2408{color:#305568}.bg-N2408{background-color:#305568}.border-N2408{border-color:#305568}.text-N2409{color:#2b414d}.bg-N2409{background-color:#2b414d}.border-N2409{border-color:#2b414d}.text-N2551{color:#d3e5f8}.bg-N2551{background-color:#d3e5f8}.border-N2551{border-color:#d3e5f8}.text-N2552{color:#b5cfec}.bg-N2552{background-color:#b5cfec}.border-N2552{border-color:#b5cfec}.text-N2553{color:#95bbe0}.bg-N2553{background-color:#95bbe0}.border-N2553{border-color:#95bbe0}.text-N2554{color:#75a6d4}.bg-N2554{background-color:#75a6d4}.border-N2554{border-color:#75a6d4}.text-N2555{color:#5192c8}.bg-N2555{background-color:#5192c8}.border-N2555{border-color:#5192c8}.text-N2556{color:#497ca8}.bg-N2556{background-color:#497ca8}.border-N2556{border-color:#497ca8}.text-N2557{color:#416789}.bg-N2557{background-color:#416789}.border-N2557{border-color:#416789}.text-N2558{color:#39536b}.bg-N2558{background-color:#39536b}.border-N2558{border-color:#39536b}.text-N2559{color:#303f4f}.bg-N2559{background-color:#303f4f}.border-N2559{border-color:#303f4f}.text-N2701{color:#dae3f9}.bg-N2701{background-color:#dae3f9}.border-N2701{border-color:#dae3f9}.text-N2702{color:#becdee}.bg-N2702{background-color:#becdee}.border-N2702{border-color:#becdee}.text-N2703{color:#a3b7e2}.bg-N2703{background-color:#a3b7e2}.border-N2703{border-color:#a3b7e2}.text-N2704{color:#87a2d6}.bg-N2704{background-color:#87a2d6}.border-N2704{border-color:#87a2d6}.text-N2705{color:#6a8dca}.bg-N2705{background-color:#6a8dca}.border-N2705{border-color:#6a8dca}.text-N2706{color:#5d78aa}.bg-N2706{background-color:#5d78aa}.border-N2706{border-color:#5d78aa}.text-N2707{color:#4f648b}.bg-N2707{background-color:#4f648b}.border-N2707{border-color:#4f648b}.text-N2708{color:#42516c}.bg-N2708{background-color:#42516c}.border-N2708{border-color:#42516c}.text-N2709{color:#353e50}.bg-N2709{background-color:#353e50}.border-N2709{border-color:#353e50}.text-N2851{color:#e0e1f9}.bg-N2851{background-color:#e0e1f9}.border-N2851{border-color:#e0e1f9}.text-N2852{color:#c8caed}.bg-N2852{background-color:#c8caed}.border-N2852{border-color:#c8caed}.text-N2853{color:#b1b3e1}.bg-N2853{background-color:#b1b3e1}.border-N2853{border-color:#b1b3e1}.text-N2854{color:#999dd5}.bg-N2854{background-color:#999dd5}.border-N2854{border-color:#999dd5}.text-N2855{color:#8188c8}.bg-N2855{background-color:#8188c8}.border-N2855{border-color:#8188c8}.text-N2856{color:#6f74a8}.bg-N2856{background-color:#6f74a8}.border-N2856{border-color:#6f74a8}.text-N2857{color:#5d6189}.bg-N2857{background-color:#5d6189}.border-N2857{border-color:#5d6189}.text-N2858{color:#4c4e6c}.bg-N2858{background-color:#4c4e6c}.border-N2858{border-color:#4c4e6c}.text-N2859{color:#3b3c4f}.bg-N2859{background-color:#3b3c4f}.border-N2859{border-color:#3b3c4f}.text-N3001{color:#e7dff6}.bg-N3001{background-color:#e7dff6}.border-N3001{border-color:#e7dff6}.text-N3002{color:#d3c7e9}.bg-N3002{background-color:#d3c7e9}.border-N3002{border-color:#d3c7e9}.text-N3003{color:#beafdc}.bg-N3003{background-color:#beafdc}.border-N3003{border-color:#beafdc}.text-N3004{color:#aa98cf}.bg-N3004{background-color:#aa98cf}.border-N3004{border-color:#aa98cf}.text-N3005{color:#9582c2}.bg-N3005{background-color:#9582c2}.border-N3005{border-color:#9582c2}.text-N3006{color:#7f6fa3}.bg-N3006{background-color:#7f6fa3}.border-N3006{border-color:#7f6fa3}.text-N3007{color:#6a5d86}.bg-N3007{background-color:#6a5d86}.border-N3007{border-color:#6a5d86}.text-N3008{color:#554c69}.bg-N3008{background-color:#554c69}.border-N3008{border-color:#554c69}.text-N3009{color:#413b4d}.bg-N3009{background-color:#413b4d}.border-N3009{border-color:#413b4d}.text-N3151{color:#edddf3}.bg-N3151{background-color:#edddf3}.border-N3151{border-color:#edddf3}.text-N3152{color:#dcc4e4}.bg-N3152{background-color:#dcc4e4}.border-N3152{border-color:#dcc4e4}.text-N3153{color:#caacd6}.bg-N3153{background-color:#caacd6}.border-N3153{border-color:#caacd6}.text-N3154{color:#b994c7}.bg-N3154{background-color:#b994c7}.border-N3154{border-color:#b994c7}.text-N3155{color:#a77cb9}.bg-N3155{background-color:#a77cb9}.border-N3155{border-color:#a77cb9}.text-N3156{color:#8d6b9c}.bg-N3156{background-color:#8d6b9c}.border-N3156{border-color:#8d6b9c}.text-N3157{color:#755a7f}.bg-N3157{background-color:#755a7f}.border-N3157{border-color:#755a7f}.text-N3158{color:#5d4964}.bg-N3158{background-color:#5d4964}.border-N3158{border-color:#5d4964}.text-N3159{color:#46394b}.bg-N3159{background-color:#46394b}.border-N3159{border-color:#46394b}.text-N3301{color:#f3dcee}.bg-N3301{background-color:#f3dcee}.border-N3301{border-color:#f3dcee}.text-N3302{color:#e3c2dd}.bg-N3302{background-color:#e3c2dd}.border-N3302{border-color:#e3c2dd}.text-N3303{color:#d4a9cd}.bg-N3303{background-color:#d4a9cd}.border-N3303{border-color:#d4a9cd}.text-N3304{color:#c590bc}.bg-N3304{background-color:#c590bc}.border-N3304{border-color:#c590bc}.text-N3305{color:#b577ac}.bg-N3305{background-color:#b577ac}.border-N3305{border-color:#b577ac}.text-N3306{color:#996791}.bg-N3306{background-color:#996791}.border-N3306{border-color:#996791}.text-N3307{color:#7d5777}.bg-N3307{background-color:#7d5777}.border-N3307{border-color:#7d5777}.text-N3308{color:#63475f}.bg-N3308{background-color:#63475f}.border-N3308{border-color:#63475f}.text-N3309{color:#4a3847}.bg-N3309{background-color:#4a3847}.border-N3309{border-color:#4a3847}.text-N3451{color:#f7dbe9}.bg-N3451{background-color:#f7dbe9}.border-N3451{border-color:#f7dbe9}.text-N3452{color:#e9c1d5}.bg-N3452{background-color:#e9c1d5}.border-N3452{border-color:#e9c1d5}.text-N3453{color:#dba7c2}.bg-N3453{background-color:#dba7c2}.border-N3453{border-color:#dba7c2}.text-N3454{color:#cd8daf}.bg-N3454{background-color:#cd8daf}.border-N3454{border-color:#cd8daf}.text-N3455{color:#bf739d}.bg-N3455{background-color:#bf739d}.border-N3455{border-color:#bf739d}.text-N3456{color:#a16485}.bg-N3456{background-color:#a16485}.border-N3456{border-color:#a16485}.text-N3457{color:#84546e}.bg-N3457{background-color:#84546e}.border-N3457{border-color:#84546e}.text-N3458{color:#684658}.bg-N3458{background-color:#684658}.border-N3458{border-color:#684658}.text-N3459{color:#4d3743}.bg-N3459{background-color:#4d3743}.border-N3459{border-color:#4d3743}.text-N3601{color:#f9dbe3}.bg-N3601{background-color:#f9dbe3}.border-N3601{border-color:#f9dbe3}.text-N3602{color:#edc0cd}.bg-N3602{background-color:#edc0cd}.border-N3602{border-color:#edc0cd}.text-N3603{color:#e0a6b7}.bg-N3603{background-color:#e0a6b7}.border-N3603{border-color:#e0a6b7}.text-N3604{color:#d38ca2}.bg-N3604{background-color:#d38ca2}.border-N3604{border-color:#d38ca2}.text-N3605{color:#c5728d}.bg-N3605{background-color:#c5728d}.border-N3605{border-color:#c5728d}.text-N3606{color:#a66278}.bg-N3606{background-color:#a66278}.border-N3606{border-color:#a66278}.text-N3607{color:#885464}.bg-N3607{background-color:#885464}.border-N3607{border-color:#885464}.text-N3608{color:#6b4551}.bg-N3608{background-color:#6b4551}.border-N3608{border-color:#6b4551}.text-N3609{color:#4f373e}.bg-N3609{background-color:#4f373e}.border-N3609{border-color:#4f373e} /*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/scss/_utils.scss b/dist/scss/_utils.scss deleted file mode 100644 index 177e0f8..0000000 --- a/dist/scss/_utils.scss +++ /dev/null @@ -1,182 +0,0 @@ -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - - -// ============================================================================ -// Functions -// ============================================================================ - -// Color Getter Function: This function will retrieve a color value based on a -// given color name. It's useful when you want to access a color from the -// $hue map. - -@function hue-color($color-name) { - @if map-has-key($hue, $color-name) { - @return map-get($hue, $color-name); - } @else { - @warn "Unknown `#{$color-name}` in `$hue`."; - @return null; - } -} - - -// Contrast Function (Optional): A function to determine if you need a light -// or dark text color on a specific background for readability. - -@function contrast-color($background-color) { - @if (lightness($background-color) > 50%) { - @return black; // Dark text on light background - } @else { - @return white; // Light text on dark background - } -} - -// Contrast Checker: A function to calculate the contrast ratio between two colors, which is useful for accessibility considerations. -@function hue-contrast($color1-name, $color2-name) { - $color1: hue-color($color1-name); - $color2: hue-color($color2-name); - @return contrast-ratio($color1, $color2); - } - - -// Dynamic Text Color: A function to dynamically determine whether to use light or dark text based on the background color for better readability. - @function dynamic-text-color($background-color-name) { - $background-color: hue-color($background-color-name); - @if (hue-contrast($background-color, black) > 4.5) { - @return black; - } @else { - @return white; - } - } - - -// Complementary Color Function -// ---------------------------------------------------------------------------- -// A function to find the complementary color on the color wheel, useful for -// creating color schemes. -@function complementary-color($color-name) { - $base-color: hue-color($color-name); - @return adjust-hue($base-color, 180deg); - } - -// Opacity Variants: Create a function to generate color variants with different opacities. - -@function hue-color-opacity($color-name, $opacity: 1) { - $color: hue-color($color-name); - @if $color != null { - @return rgba($color, $opacity); - } @else { - @return null; - } - } - -// Color Shades and Tints: Create functions to lighten and darken colors. This is useful for hover states, disabled states, or gradients. - @function hue-shade($color-name, $amount: 10%) { - $color: hue-color($color-name); - @return darken($color, $amount); - } - - @function hue-tint($color-name, $amount: 10%) { - $color: hue-color($color-name); - @return lighten($color, $amount); - } - - -// ============================================================================ -// Mixins -// ============================================================================ - -// Mixins for Text and Background Colors: These mixins can be used to apply -// text and background colors throughout your stylesheets. -// They make it easy to maintain consistency and make changes later if needed. - -@mixin text-color($color-name) { - color: hue-color($color-name); -} - -@mixin bg-color($color-name) { - background-color: hue-color($color-name); -} - -@mixin border-color($color-name) { - border-color: hue-color($color-name); - } - - -// Accessibility Mixin: A mixin to ensure text color contrasts well with its background for accessibility. - @mixin accessible-text-color($background-color-name) { - $background-color: hue-color($background-color-name); - color: contrast-color($background-color); - } - -// Gradient Mixin: Create a mixin for generating gradients with your color palette. - - - @mixin gradient-bg($start-color-name, $end-color-name) { - background: linear-gradient(hue-color($start-color-name), hue-color($end-color-name)); - } - -// Themed Components: Create a set of mixins for theming components. This can include buttons, links, etc. -@mixin button-theme($bg-color-name, $text-color-name: null) { - @include bg-color($bg-color-name); - @if $text-color-name != null { - @include text-color($text-color-name); - } @else { - @include accessible-text-color($bg-color-name); - } - // Add more button styles here - } - -// Color Blending Mixin: A mixin to blend two colors from your color map. - - - @mixin blend-colors($color1-name, $color2-name, $percentage: 50%) { - $color1: hue-color($color1-name); - $color2: hue-color($color2-name); - background-color: mix($color1, $color2, $percentage); - } - -// ============================================================================ -// Classes -// ============================================================================ - - // Utility Classes Generation: This step involves creating utility classes - // for each color in your map. It generates classes like .text-N0001, - // .bg-N0001, etc., for quick and easy styling in HTML. - - @each $color-name, $color-value in $hue { - - .text-#{$color-name} { - @include text-color($color-name); - } - - .bg-#{$color-name} { - @include bg-color($color-name); - } - - .border-#{$color-name} { - @include border-color($color-name); - } - -} - -// CSS Variables Generator: If you prefer using CSS variables, create a mixin to generate them from your SCSS map. - -:root { - @each $color-name, $color-value in $hue { - --color-#{$color-name}: #{$color-value}; - } - } - \ No newline at end of file diff --git a/dist/scss/index.scss b/dist/scss/index.scss index 2b107fe..807b214 100644 --- a/dist/scss/index.scss +++ b/dist/scss/index.scss @@ -1,3 +1,17 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + @charset "utf-8"; /** @@ -25,4 +39,4 @@ TABLE OF CONTENTS @import "hue/_hue.gl-hex-map.scss"; @import "hue/_hue.gl-hex-var.scss"; -@import "_utils.scss"; +@import "utils/utils.scss"; diff --git a/dist/scss/utils/_base.scss b/dist/scss/utils/_base.scss new file mode 100644 index 0000000..9f07488 --- /dev/null +++ b/dist/scss/utils/_base.scss @@ -0,0 +1,46 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Utilities | Base +// ============================================================================ + + +// Color Getter Function +// ---------------------------------------------------------------------------- +// This function will retrieve a color value based on a given color name. +// It's useful when you want to access a color from the $hue map. + +@function hue_color($color_name) { + @if map-has-key($hue, $color_name) { + @return map-get($hue, $color_name); + } @else { + @warn "Unknown `#{$color_name}` in `$hue`."; + @return null; + } +} + + + +// CSS Variables Generator +// ---------------------------------------------------------------------------- +// A mixin to generate CSS variables from your SCSS map. + +:root { + @each $color_name, $color-value in $hue { + --color-#{$color_name}: #{$color-value}; + } +} diff --git a/dist/scss/utils/_blend.scss b/dist/scss/utils/_blend.scss new file mode 100644 index 0000000..0a3c4b9 --- /dev/null +++ b/dist/scss/utils/_blend.scss @@ -0,0 +1,43 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Utilities | Blend +// ============================================================================ + + +// Gradient Mixin +// ---------------------------------------------------------------------------- +// Create a mixin for generating gradients with your color palette. + +@mixin gradient_bg($start_color_name, $end_color_name) { + background: linear-gradient( + hue_color($start_color_name), + hue_color($end_color_name) + ); +} + + +// Color Blending Mixin +// ---------------------------------------------------------------------------- +// A mixin to blend two colors from your color map. + +@mixin blend_colors($color1_name, $color2_name, $percentage: 50%) { + $color1: hue_color($color1_name); + $color2: hue_color($color2_name); + background-color: mix($color1, $color2, $percentage); +} + + diff --git a/dist/scss/utils/_contrast.scss b/dist/scss/utils/_contrast.scss new file mode 100644 index 0000000..b2ba610 --- /dev/null +++ b/dist/scss/utils/_contrast.scss @@ -0,0 +1,70 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Utilities | Contrast +// ============================================================================ + + +// Contrast Function +// ---------------------------------------------------------------------------- +// A function to determine if you need a light or dark text color +// on a specific background for readability. + +@function color_contrast($background-color) { + @if (lightness($background-color) > 50%) { + @return black; // Dark text on light background + } @else { + @return white; // Light text on dark background + } +} + + +// Contrast Checker +// ---------------------------------------------------------------------------- +// A function to calculate the contrast ratio between two colors, which is +// useful for accessibility considerations. + +@function color_contrast_checker($color1-name, $color2-name) { + $color1: hue-color($color1-name); + $color2: hue-color($color2-name); + @return contrast-ratio($color1, $color2); +} + + +// Dynamic Text Color +// ---------------------------------------------------------------------------- +// A function to dynamically determine whether to use light or dark text +// based on the background color for better readability. + +@function color_contrast_dynamic($background-color_name) { + $background-color: hue-color($background-color_name); + @if (hue-contrast($background-color, black) > 4.5) { + @return black; + } @else { + @return white; + } +} + + +// Accessibility Mixin +// ---------------------------------------------------------------------------- +// A mixin to ensure text color contrasts well with its background for +// accessibility. + +@mixin accessible_text_color($background_color_name) { + $background-color: hue_color($background_color_name); + color: color_contrast_checker($background-color); +} \ No newline at end of file diff --git a/dist/scss/utils/_helpers.scss b/dist/scss/utils/_helpers.scss new file mode 100644 index 0000000..5d499d0 --- /dev/null +++ b/dist/scss/utils/_helpers.scss @@ -0,0 +1,77 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Utilities | Helpers +// ============================================================================ + + +// Component Helpers +// ---------------------------------------------------------------------------- + +// Mixins for Text and Background Colors: These mixins can be used to apply +// text and background colors throughout your stylesheets. +// They make it easy to maintain consistency and make changes later if needed. + +@mixin text_color($color_name) { + color: hue_color($color_name); +} + +@mixin bg_color($color_name) { + background-color: hue_color($color_name); +} + +@mixin border-color($color_name) { + border-color: hue_color($color_name); +} + + +// Themed Components +// ---------------------------------------------------------------------------- +// Create a set of mixins for theming components. +// This can include buttons, links, etc. + +@mixin button_theme($bg_color_name, $text_color_name: null) { + @include bg_color($bg_color_name); + @if $text_color_name != null { + @include text_color($text_color_name); + } @else { + @include accessible_text_color($bg_color_name); + } + // Add more button styles here +} + + +// Utility Classes Generation +// ---------------------------------------------------------------------------- +// This step involves creating utility classes +// for each color in your map. It generates classes like .text-N0001, +// .bg-N0001, etc., for quick and easy styling in HTML. + +@each $color_name, $color-value in $hue { + + .text-#{$color_name} { + @include text_color($color_name); + } + + .bg-#{$color_name} { + @include bg_color($color_name); + } + + .border-#{$color_name} { + @include border-color($color_name); + } + +} diff --git a/script/ts/hue/config/hue.config.ts b/dist/scss/utils/_scheme.scss similarity index 62% rename from script/ts/hue/config/hue.config.ts rename to dist/scss/utils/_scheme.scss index 8bb6205..23e32e2 100644 --- a/script/ts/hue/config/hue.config.ts +++ b/dist/scss/utils/_scheme.scss @@ -1,5 +1,3 @@ -// hue/config/hue.config.ts - // Copyright 2023 Scape Agency BV // Licensed under the Apache License, Version 2.0 (the "License"); @@ -15,27 +13,17 @@ // limitations under the License. -// ============================================================================ -// Constants -// ============================================================================ - -const hueConfig = { - - prefix: "N", - h_step: 15, - p_count: 9, - l_l_min: 96, - l_l_step: -6, - d_l_step: -6, - l_c_min: 12, - l_c_step: 6, - d_c_step: -6, - -}; - // ============================================================================ -// Export +// Utilities | Scheme // ============================================================================ -export default hueConfig; \ No newline at end of file +// Complementary Color Function +// ---------------------------------------------------------------------------- +// A function to find the complementary color on the color wheel, useful for +// creating color schemes. + +@function complementary_color($color_name) { + $base-color: hue_color($color_name); + @return adjust-hue($base-color, 180deg); +} \ No newline at end of file diff --git a/dist/scss/utils/_variants.scss b/dist/scss/utils/_variants.scss new file mode 100644 index 0000000..9c0874f --- /dev/null +++ b/dist/scss/utils/_variants.scss @@ -0,0 +1,49 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Utilities | Variants +// ============================================================================ + + +// Opacity Variants +// Create a function to generate color variants with different opacities. +// ---------------------------------------------------------------------------- + +@function hue_color_opacity($color_name, $opacity: 1) { + $color: hue_color($color_name); + @if $color != null { + @return rgba($color, $opacity); + } @else { + @return null; + } +} + + +// Color Shades and Tints +// ---------------------------------------------------------------------------- +// Create functions to lighten and darken colors. This is useful for hover +// states, disabled states, or gradients. + +@function hue_shade($color_name, $amount: 10%) { + $color: hue_color($color_name); + @return darken($color, $amount); +} + +@function hue_tint($color_name, $amount: 10%) { + $color: hue_color($color_name); + @return lighten($color, $amount); +} diff --git a/dist/scss/utils/utils.scss b/dist/scss/utils/utils.scss new file mode 100644 index 0000000..6873acb --- /dev/null +++ b/dist/scss/utils/utils.scss @@ -0,0 +1,25 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Colour Utilities +// ============================================================================ + +@import "_base.scss"; +@import "_contrast.scss"; +@import "_variants.scss"; +@import "_blend.scss"; +@import "_scheme.scss"; +@import "_helpers.scss"; diff --git a/package-lock.json b/package-lock.json index 8a49bd2..673edda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,11 +39,11 @@ "eslint-plugin-prettier": "^5.0.1", "grid.gl": "^0.0.1", "html-webpack-plugin": "^5.5.3", - "hue.gl": "^0.0.7", - "icon.gl": "^0.0.4", + "hue.gl": "^0.0.8", + "icon.gl": "^0.0.9", "loop.gl": "^0.0.1", "mini-css-extract-plugin": "^2.7.6", - "pack.gl": "^0.0.34", + "pack.gl": "^0.0.38", "page.gl": "^0.0.3", "postcss-loader": "^7.3.3", "postcss-preset-env": "^9.1.2", @@ -54,7 +54,7 @@ "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "typescript": "^5.3.3", - "unit.gl": "^0.0.26", + "unit.gl": "^0.0.27", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1", @@ -9367,10 +9367,16 @@ } }, "node_modules/hue.gl": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/hue.gl/-/hue.gl-0.0.7.tgz", - "integrity": "sha512-A28VyNWPP/jsVUtDNKic352DqSaFwov2uWidLqzumwK+Dow+3tV/ro6ZMbHkOfHQBD0X0J6SvJ5LnyFgwVwBJg==", - "dev": true + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/hue.gl/-/hue.gl-0.0.8.tgz", + "integrity": "sha512-ZromNcKmemABdq1Z23gG6yZRGk92tQUtnWTXiDfax+aa2fc7LzwUeFoUxoEYo29Qfa75QUP3OsgKK76oVd3tnw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/scape-agency" + } + ] }, "node_modules/human-signals": { "version": "2.1.0", @@ -9391,10 +9397,16 @@ } }, "node_modules/icon.gl": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/icon.gl/-/icon.gl-0.0.4.tgz", - "integrity": "sha512-0D5uI3F5I/FFauylZMJMS76PtiWAgA2zxwaqQNoGhO/CZ1KwD2ne/c/oEu3/5OqUQm81wm6dIll96JmVMG6Qfw==", - "dev": true + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/icon.gl/-/icon.gl-0.0.9.tgz", + "integrity": "sha512-vsDe/4iuWpuk8HovCirwa2Gz5wy4uzSO+UzH5jwpZ/Cxi5bitb7onPOBoSmV1saCBd7AB4pzhA7LCrIc/hA79A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/scape-foundation" + } + ] }, "node_modules/iconv-lite": { "version": "0.6.3", @@ -11539,9 +11551,9 @@ } }, "node_modules/pack.gl": { - "version": "0.0.34", - "resolved": "https://registry.npmjs.org/pack.gl/-/pack.gl-0.0.34.tgz", - "integrity": "sha512-E03pIKA0rmTQTMmjTOeJqX0Jyo98wrCulEs8djBxPB/K28r8CNZQiIR3NAeJtRRFsYgO4yaFDDeOGSPbyDkDeQ==", + "version": "0.0.38", + "resolved": "https://registry.npmjs.org/pack.gl/-/pack.gl-0.0.38.tgz", + "integrity": "sha512-UavmeCiTfFYkj/i6rlimcmpIZ5MtFyKRaBtxkHP+6aBUkQzmDOL4OBlAGjYELvJTs8Hm7a0RSFEcyGVjaWt+cQ==", "dev": true, "dependencies": { "@babel/core": "^7.23.6", @@ -11556,7 +11568,7 @@ "autoprefixer": "^10.4.16", "cssnano": "^6.0.3", "del": "^7.1.0", - "eslint": "^8.41.0", + "eslint": "^8.56.0", "eslint-config-prettier": "^9.0.0", "fantasticon": "^2.0.0", "fs-extra": "^11.2.0", @@ -11568,6 +11580,7 @@ "postcss-preset-env": "^9.3.0", "prettier": "^3.0.3", "sass": "^1.69.7", + "semver": "^7.5.4", "sharp": "^0.33.1", "svg-sprite": "^2.0.2", "svgo": "^3.1.0", @@ -11675,6 +11688,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pack.gl/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/pack.gl/node_modules/p-map": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-5.5.0.tgz", @@ -11725,6 +11750,27 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/pack.gl/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/pack.gl/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/page.gl": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/page.gl/-/page.gl-0.0.3.tgz", @@ -15891,10 +15937,16 @@ } }, "node_modules/unit.gl": { - "version": "0.0.26", - "resolved": "https://registry.npmjs.org/unit.gl/-/unit.gl-0.0.26.tgz", - "integrity": "sha512-kmEq81+lfqGIfdXTwFv++RbH8XJ9EzPj497WfwT3mM/TR6muVSxGsOrWB3a/OP3L3yZAK6rjxMoLG6kpQ8y2fA==", - "dev": true + "version": "0.0.27", + "resolved": "https://registry.npmjs.org/unit.gl/-/unit.gl-0.0.27.tgz", + "integrity": "sha512-3s3Ixly85d6kk3zbnJQvx1qrhxl5cHqd/Lfbti4yYgLdiRSG81kzRaIcIExzvC5MNrffH2I9flSiN/m7LT8G7Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/scape-foundation" + } + ] }, "node_modules/universalify": { "version": "2.0.1", diff --git a/package.json b/package.json index c781ca2..fbe1bb3 100644 --- a/package.json +++ b/package.json @@ -83,11 +83,11 @@ "eslint-plugin-prettier": "^5.0.1", "grid.gl": "^0.0.1", "html-webpack-plugin": "^5.5.3", - "hue.gl": "^0.0.7", - "icon.gl": "^0.0.4", + "hue.gl": "^0.0.8", + "icon.gl": "^0.0.9", "loop.gl": "^0.0.1", "mini-css-extract-plugin": "^2.7.6", - "pack.gl": "^0.0.34", + "pack.gl": "^0.0.38", "page.gl": "^0.0.3", "postcss-loader": "^7.3.3", "postcss-preset-env": "^9.1.2", @@ -98,7 +98,7 @@ "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "typescript": "^5.3.3", - "unit.gl": "^0.0.26", + "unit.gl": "^0.0.27", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1", diff --git a/script/js/hue/color/ColorScheme.js b/script/js/hue/color/ColorScheme.js deleted file mode 100644 index c30a94e..0000000 --- a/script/js/hue/color/ColorScheme.js +++ /dev/null @@ -1,61 +0,0 @@ -import ColorSwatch from './ColorSwatch.js'; -import { pad } from '../util.js'; -class ColorScheme { - constructor(config, names) { - this.config = config; - this.names = names; - this.colorList = []; - this.colorDict = {}; - this.initializeColors(); - } - initializeColors() { - const l_count = Math.ceil(this.config.p_count / 2); - const d_count = Math.floor(this.config.p_count / 2); - const d_l_min = this.config.l_l_min + (this.config.l_l_step * (l_count - 1)); - const d_c_min = this.config.l_c_min + (this.config.l_c_step * (l_count - 1)); - const l_list = []; - const c_list = []; - for (let i = 0; i < this.config.p_count; i++) { - let l_cur = this.config.l_l_min + this.config.l_l_step + i * this.config.l_l_step - 2 * i; - l_list.push(l_cur); - } - ; - for (let i = 0; i < l_count; i++) { - let c_cur = this.config.l_c_min + i * this.config.l_c_step; - c_list.push(c_cur); - } - ; - for (let i = 0; i < d_count; i++) { - let c_cur = d_c_min + this.config.d_c_step + i * this.config.d_c_step; - c_list.push(c_cur); - } - ; - for (let h = 0; h <= 360; h += this.config.h_step) { - let h_group = {}; - let h_group_name = this.names[h]; - ; - for (let i = 0; i < this.config.p_count; i++) { - let l_cur = l_list[i]; - let c_cur = c_list[i]; - if (h == 0) { - c_cur = 0; - } - ; - let name = this.config.prefix + pad(h.toString(), 3, "0") + (i + 1).toString(); - let color = new ColorSwatch(h, c_cur, l_cur, name); - this.colorList.push(color); - h_group[name] = color; - } - ; - this.colorDict[h_group_name] = h_group; - } - } - getColorList() { - return this.colorList; - } - getColorDict() { - return this.colorDict; - } -} -export default ColorScheme; -//# sourceMappingURL=ColorScheme.js.map \ No newline at end of file diff --git a/script/js/hue/color/ColorSwatch.js b/script/js/hue/color/ColorSwatch.js deleted file mode 100644 index d24f9e7..0000000 --- a/script/js/hue/color/ColorSwatch.js +++ /dev/null @@ -1,195 +0,0 @@ -import Color from 'colorjs.io'; -import { convertRGBtoHex } from '../util.js'; -class ColorSwatch { - constructor(h, c, l, name) { - this.h = 0; - this.c = 0; - this.l = 0; - if (h < 0 || h > 360 || c < 0 || c > 100 || l < 0 || l > 100) { - throw new Error("Invalid HCL values"); - } - this.h = h; - this.c = c; - this.l = l; - this.name = name; - this.model = new Color("lch", [l, c, h]); - ; - } - setHCL(h, c, l) { - if (h < 0 || h > 360 || c < 0 || c > 100 || l < 0 || l > 100) { - throw new Error("Invalid HCL values"); - } - this.h = h; - this.c = c; - this.l = l; - } - checkGamut(color_constant) { - let lch_in_gamut = (color_constant.to("lch")).inGamut(); - let srgb_in_gamut = (color_constant.to("srgb")).inGamut(); - let argb_in_gamut = (color_constant.to("a98rgb")).inGamut(); - let in_gamut; - if (lch_in_gamut == false || - srgb_in_gamut == false || - argb_in_gamut == false) { - in_gamut = false; - } - else { - in_gamut = true; - } - return in_gamut; - } - getName() { - return this.name; - } - getRGB() { - return [0, 0, 0]; - } - a98rgb() { - let color = this.model.to("a98rgb"); - return color.coords; - } - a98rgb_linear() { - let color = this.model.to("a98rgb-linear"); - return color.coords; - } - acescg() { - let color = this.model.to("acescg"); - return color.coords; - } - hsl() { - let color = this.model.to("hsl"); - return color.coords; - } - hsv() { - let color = this.model.to("hsv"); - return color.coords; - } - hwb() { - let color = this.model.to("hwb"); - return color.coords; - } - ictcp() { - let color = this.model.to("ictcp"); - return color.coords; - } - jzczhz() { - let color = this.model.to("jzczhz"); - return color.coords; - } - jzazbz() { - let color = this.model.to("jzazbz"); - return color.coords; - } - lab() { - let color = this.model.to("lab"); - return color.coords; - } - lab_d65() { - let color = this.model.to("lab-d65"); - return color.coords; - } - lch() { - let color = this.model.to("lch"); - return color.coords; - } - oklch() { - let color = this.model.to("oklch"); - return color.coords; - } - oklab() { - let color = this.model.to("oklab"); - return color.coords; - } - p3() { - let color = this.model.to("p3"); - return color.coords; - } - p3_linear() { - let color = this.model.to("p3-linear"); - return color.coords; - } - prophoto() { - let color = this.model.to("prophoto"); - return color.coords; - } - prophoto_linear() { - let color = this.model.to("prophoto-linear"); - return color.coords; - } - rec2020() { - let color = this.model.to("rec2020"); - return color.coords; - } - rec2020_linear() { - let color = this.model.to("rec2020-linear"); - return color.coords; - } - rec2100hlg() { - let color = this.model.to("rec2100hlg"); - return color.coords; - } - rec2100pq() { - let color = this.model.to("rec2100pq"); - return color.coords; - } - xyz_abs_d65() { - let color = this.model.to("xyz-abs-d65"); - return color.coords; - } - xyz_d50() { - let color = this.model.to("xyz-d50"); - return color.coords; - } - xyz_d65() { - let color = this.model.to("xyz-d65"); - return color.coords; - } - xyz() { - let color = this.model.to("xyz"); - return color.coords; - } - srgb() { - let color = this.model.to("srgb"); - return color; - } - srgb_linear() { - let color = this.model.to("srgb-linear"); - return color.coords; - } - hex() { - let color = this.srgb(); - let hex = convertRGBtoHex(Math.round(color.coords[0] * 255), Math.round(color.coords[1] * 255), Math.round(color.coords[2] * 255)); - return hex; - } - hcl() { - let hcl = { - "h": this.h, - "c": this.c, - "l": this.l, - }; - return hcl; - } - rgb() { - let color = this.srgb(); - let rgb = { - "r": Math.round(color.coords[0] * 255), - "g": Math.round(color.coords[1] * 255), - "b": Math.round(color.coords[2] * 255) - }; - return rgb; - } - toString() { - const [r, g, b] = this.getRGB(); - return `rgb(${r}, ${g}, ${b})`; - } - toDict() { - return { - name: this.name, - hcl_h: this.h, - hcl_c: this.c, - hcl_l: this.l, - }; - } -} -export default ColorSwatch; -//# sourceMappingURL=ColorSwatch.js.map \ No newline at end of file diff --git a/script/js/hue/config/hue.config.js b/script/js/hue/config/hue.config.js deleted file mode 100644 index ef3ccfa..0000000 --- a/script/js/hue/config/hue.config.js +++ /dev/null @@ -1,13 +0,0 @@ -const hueConfig = { - prefix: "N", - h_step: 15, - p_count: 9, - l_l_min: 96, - l_l_step: -6, - d_l_step: -6, - l_c_min: 12, - l_c_step: 6, - d_c_step: -6, -}; -export default hueConfig; -//# sourceMappingURL=hue.config.js.map \ No newline at end of file diff --git a/script/js/hue/config/hue.names.js b/script/js/hue/config/hue.names.js deleted file mode 100644 index 6c2a96d..0000000 --- a/script/js/hue/config/hue.names.js +++ /dev/null @@ -1,29 +0,0 @@ -const hueNames = { - 0: "Grey", - 15: "Salmon", - 30: "Orange", - 45: "Amber", - 60: "Yellow", - 75: "Lime", - 90: "Ecru", - 105: "Olive", - 120: "Green", - 135: "Forest", - 150: "Jade", - 165: "Mint", - 180: "Cyan", - 195: "Teal", - 210: "Capri", - 225: "Sky", - 240: "Blue", - 255: "Azure", - 270: "Indigo", - 285: "Violet", - 300: "Magenta", - 315: "Purple", - 330: "Rose", - 345: "Pink", - 360: "Red" -}; -export default hueNames; -//# sourceMappingURL=hue.names.js.map \ No newline at end of file diff --git a/script/js/hue/types.js b/script/js/hue/types.js deleted file mode 100644 index 718fd38..0000000 --- a/script/js/hue/types.js +++ /dev/null @@ -1,2 +0,0 @@ -export {}; -//# sourceMappingURL=types.js.map \ No newline at end of file diff --git a/script/js/hue/util.js b/script/js/hue/util.js deleted file mode 100644 index 0feb5d0..0000000 --- a/script/js/hue/util.js +++ /dev/null @@ -1,39 +0,0 @@ -export function rgb2cmyk(r, g, b, normalized) { - var c = 1 - (r / 255); - var m = 1 - (g / 255); - var y = 1 - (b / 255); - var k = Math.min(c, Math.min(m, y)); - c = (c - k) / (1 - k); - m = (m - k) / (1 - k); - y = (y - k) / (1 - k); - if (!normalized) { - c = Math.round(c * 10000) / 100; - m = Math.round(m * 10000) / 100; - y = Math.round(y * 10000) / 100; - k = Math.round(k * 10000) / 100; - } - c = isNaN(c) ? 0 : c; - m = isNaN(m) ? 0 : m; - y = isNaN(y) ? 0 : y; - k = isNaN(k) ? 0 : k; - return { - c: c, - m: m, - y: y, - k: k - }; -} -export function colorToHex(color) { - var hexadecimal = color.toString(16); - return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal; -} -export function convertRGBtoHex(red, green, blue) { - return "#" + colorToHex(red) + colorToHex(green) + colorToHex(blue); -} -export function pad(num, size, char) { - num = num.toString(); - while (num.length < size) - num = char + num; - return num; -} -//# sourceMappingURL=util.js.map \ No newline at end of file diff --git a/script/js/index.js b/script/js/index.js deleted file mode 100644 index 87b9375..0000000 --- a/script/js/index.js +++ /dev/null @@ -1,117 +0,0 @@ -import { __awaiter } from "tslib"; -import path from 'path'; -import { DirectoryCleaner, DirectoryCopier, FileCopier, StyleProcessor, PackageCreator, VersionWriter, TypeScriptCompiler, JavaScriptMinifier, StylizedLogger, TemplateWriter, SvgToPngConverter, readPackageJson, } from 'pack.gl'; -import ColorScheme from './hue/color/ColorScheme.js'; -import hueConfig from "./hue/config/hue.config.js"; -import hueNames from "./hue/config/hue.names.js"; -const CONFIG = { - path: { - src: './src', - dist: './dist', - svg_input: './src/svg', - svg_output: './dist/svg', - scss_input: './src/scss', - scss_output: './dist/scss', - css_output: './dist/css', - json_output: './dist', - ts_input: './src/ts', - ts_output: './dist/ts', - ts_output_icons: './src/ts/icons', - js_output: './dist/js', - jinja_input: './src/jinja', - }, -}; -function main() { - return __awaiter(this, void 0, void 0, function* () { - try { - const logger = new StylizedLogger(); - logger.header('Install .gl libraries'); - const directoryCleaner = new DirectoryCleaner(); - logger.header('Clean Directories'); - directoryCleaner.cleanDirectory(CONFIG.path.dist); - logger.body(`Directory cleaned: ${CONFIG.path.dist}`); - const localPackageConfig = yield readPackageJson('./package.json'); - const packageCreator = new PackageCreator(localPackageConfig); - const packageConfig = packageCreator.config; - packageCreator.createPackageJson(CONFIG.path.dist); - logger.header('Color Generation'); - const colorScheme = new ColorScheme(hueConfig, hueNames); - const color_dict = colorScheme.getColorDict(); - logger.header('Color Writer'); - const template_context = { - colors: color_dict, - name: packageConfig["name"], - version: packageConfig["version"], - website: packageConfig["homepage"], - }; - const templater = new TemplateWriter(CONFIG.path.jinja_input, template_context); - yield templater.generateToFile('hue.gl.code-snippets.jinja', path.join(CONFIG.path.dist, 'code-snippets', 'hue.gl.code-snippets')); - yield templater.generateToFile('hue.gl.inkscape.jinja', path.join(CONFIG.path.dist, 'inkscape', 'hue.gl.inkscape')); - yield templater.generateToFile('hue.gl.less.jinja', path.join(CONFIG.path.dist, 'less', 'hue.gl.less')); - yield templater.generateToFile('hue.gl.md.jinja', path.join(CONFIG.path.dist, 'md', 'hue.gl.md')); - yield templater.generateToFile('hue.gl.oco.jinja', path.join(CONFIG.path.dist, 'oco', 'hue.gl.oco')); - yield templater.generateToFile('hue.gl.py.jinja', path.join(CONFIG.path.dist, 'py', 'hue.gl.py')); - yield templater.generateToFile('hue.gl.rcpx.jinja', path.join(CONFIG.path.dist, 'rcpx', 'hue.gl.rcpx')); - yield templater.generateToFile('hue.gl.sketchpalette.jinja', path.join(CONFIG.path.dist, 'sketchpalette', 'hue.gl.sketchpalette')); - yield templater.generateToFile('hue.gl.styl.jinja', path.join(CONFIG.path.dist, 'styl', 'hue.gl.styl')); - yield templater.generateToFile('hue.gl.tex.jinja', path.join(CONFIG.path.dist, 'tex', 'hue.gl.tex')); - yield templater.generateToFile('hue.gl-rgb-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-rgb-map.scss')); - yield templater.generateToFile('hue.gl-rgb-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-rgb-var.scss')); - yield templater.generateToFile('hue.gl-hcl-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hcl-map.scss')); - yield templater.generateToFile('hue.gl-hcl-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hcl-var.scss')); - yield templater.generateToFile('hue.gl-hex-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hex-map.scss')); - yield templater.generateToFile('hue.gl-hex-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hex-var.scss')); - yield templater.generateToFile('hue.gl.d.ts.jinja', path.join(CONFIG.path.dist, 'ts', 'hue.gl.d.ts')); - yield templater.generateToFile('hue.gl.js.jinja', path.join(CONFIG.path.dist, 'js', 'hue.gl.js')); - for (const groupName in color_dict) { - if (color_dict.hasOwnProperty(groupName)) { - console.log(`Group: ${groupName}`); - for (const colorName in color_dict[groupName]) { - if (color_dict[groupName].hasOwnProperty(colorName)) { - const colorSwatch = color_dict[groupName][colorName]; - console.log(`Color Name: ${colorName}`); - const svg_template_context = { color: colorSwatch, }; - const svg_templater = new TemplateWriter(CONFIG.path.jinja_input, svg_template_context); - let svg_output_path = path.join(CONFIG.path.dist, 'svg', 'swatch', `${colorName}.svg`); - yield svg_templater.generateToFile('square.svg.jinja', svg_output_path); - const converter = new SvgToPngConverter(); - const svgContent = yield svg_templater.generateTemplate('square.svg.jinja'); - let png_output_path = path.join(CONFIG.path.dist, 'png', 'swatch', `${colorName}.png`); - yield converter.convert(svgContent, png_output_path, 500, 500) - .then(() => console.log('Conversion successful')) - .catch(error => console.error('Conversion failed:', error)); - } - } - } - } - const styleProcessor = new StyleProcessor(); - logger.header('Processing SASS...'); - yield styleProcessor.processStyles(path.join(CONFIG.path.scss_input, 'index.scss'), path.join(CONFIG.path.css_output, `${packageConfig.name}.css`), 'expanded'); - yield styleProcessor.processStyles(path.join(CONFIG.path.scss_input, 'index.scss'), path.join(CONFIG.path.css_output, `${packageConfig.name}.min.css`), 'compressed'); - logger.body('SASS Processing completed.'); - const directoryCopier = new DirectoryCopier(); - yield directoryCopier.recursiveCopy(CONFIG.path.ts_input, CONFIG.path.ts_output); - yield directoryCopier.recursiveCopy(CONFIG.path.scss_input, CONFIG.path.scss_output); - const fileCopier = new FileCopier(); - fileCopier.copyFileToDirectory(path.join('.', 'README.md'), CONFIG.path.dist); - fileCopier.copyFileToDirectory(path.join('.', 'LICENSE'), CONFIG.path.dist); - const versionWriter = new VersionWriter(); - yield versionWriter.writeVersionToFile('VERSION', packageConfig.version); - const tsCompiler = new TypeScriptCompiler(); - const tsFiles = [ - path.join(CONFIG.path.ts_input, 'index.ts'), - ]; - const outputDir = './dist/js'; - yield tsCompiler.compile(tsFiles, outputDir); - const jsMinifier = new JavaScriptMinifier(); - yield jsMinifier.minifyFile(path.join(CONFIG.path.js_output, 'index.js'), path.join(CONFIG.path.js_output, `${packageConfig.name}.min.js`)) - .then(() => console.log('JavaScript minification completed.')) - .catch(console.error); - } - catch (error) { - console.error('An error occurred:', error); - } - }); -} -main(); -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/script/js/utils/ase_decode.js b/script/js/utils/ase_decode.js deleted file mode 100644 index ce51c42..0000000 --- a/script/js/utils/ase_decode.js +++ /dev/null @@ -1,2 +0,0 @@ -"use strict"; -//# sourceMappingURL=ase_decode.js.map \ No newline at end of file diff --git a/script/js/utils/ase_encode.js b/script/js/utils/ase_encode.js deleted file mode 100644 index 05d9270..0000000 --- a/script/js/utils/ase_encode.js +++ /dev/null @@ -1,31 +0,0 @@ -"use strict"; -var ByteBuffer = require('bytebuffer'); -var constants = require('./constants'); -function encode(data) { - var colors = data.colors, numberOfSwatches = data.colors.length, ase = new ByteBuffer(); - ase.writeUTF8String(constants.FILE_SIGNATURE); - ase.writeInt(constants.FORMAT_VERSION); - ase.writeInt(numberOfSwatches); - for (var i = 0; i < numberOfSwatches; i++) { - var color = colors[i], swatch = new ByteBuffer(), j = null; - ase.writeShort(constants.COLOR_START); - swatch.writeShort(color.name.length + 1); - for (j = 0; j < color.name.length; j++) { - swatch.writeShort(color.name.charCodeAt(j)); - } - swatch.writeShort(0); - var model = color.model.length == 4 ? color.model : color.model + " "; - swatch.writeUTF8String(model); - for (j = 0; j < constants.COLOR_SIZES[color.model.toUpperCase()]; j++) { - swatch.writeFloat(color.color[j]); - } - swatch.writeShort(constants.WRITE_COLOR_TYPES[color.type]); - ase.writeInt(swatch.offset); - swatch.flip(); - ase.append(swatch); - } - ase.flip(); - return ase.toBuffer(); -} -module.exports = encode; -//# sourceMappingURL=ase_encode.js.map \ No newline at end of file diff --git a/script/ts/hue/color/ColorScheme.ts b/script/ts/hue/color/ColorScheme.ts deleted file mode 100644 index b95448b..0000000 --- a/script/ts/hue/color/ColorScheme.ts +++ /dev/null @@ -1,134 +0,0 @@ -// script/class/class/DirectoryCleaner.ts - -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// ============================================================================ -// Import -// ============================================================================ - -import ColorSwatch from './ColorSwatch.js'; -import { pad } from '../util.js'; - - -// ============================================================================ -// Types -// ============================================================================ - -type ColorSchemeConfig = { - prefix?: string; - h_step?: number; - p_count?: number; - l_l_min?: number; - l_l_step?: number; - d_l_step?: number; - l_c_min?: number; - l_c_step?: number; - d_c_step?: number; -}; - - -// ============================================================================ -// Classes -// ============================================================================ - -class ColorScheme { - - private config: ColorSchemeConfig | any; - private names: any; - private colorList: ColorSwatch[]; - private colorDict: Record>; - - constructor(config: ColorSchemeConfig, names: any) { - // Initialize colorList and other properties based on config - this.config = config; - this.names = names; - this.colorList = []; - this.colorDict = {}; - this.initializeColors(); - } - - private initializeColors(): void { - // Logic to initialize colorList based on the provided configuration - - const l_count = Math.ceil(this.config.p_count / 2); - const d_count = Math.floor(this.config.p_count / 2); - const d_l_min = this.config.l_l_min + (this.config.l_l_step * (l_count-1)); - const d_c_min = this.config.l_c_min + (this.config.l_c_step * (l_count-1)); - - // Create LC lists - // -------------------------------------------------------------------- - // const l_list = [0]; - // const c_list = [0]; - const l_list = []; - const c_list = []; - for (let i = 0; i < this.config.p_count; i ++) { - let l_cur = this.config.l_l_min + this.config.l_l_step + i * this.config.l_l_step -2*i; - l_list.push(l_cur); - }; - for (let i = 0; i < l_count; i ++) { - let c_cur = this.config.l_c_min + i * this.config.l_c_step; - c_list.push(c_cur); - }; - for (let i = 0; i < d_count; i ++) { - let c_cur = d_c_min + this.config.d_c_step + i *this.config.d_c_step; - c_list.push(c_cur); - }; - - // Create hue.gl - // -------------------------------------------------------------------- - // for (let h = this.config.h_step; h <= 360; h += this.config.h_step) { - for (let h = 0; h <= 360; h += this.config.h_step) { - - let h_group: Record = {}; - // let h_group_name = h.toString(); - let h_group_name = this.names[h];; - - - - for (let i = 0; i < this.config.p_count; i ++) { - let l_cur = l_list[i]; - let c_cur = c_list[i]; - if (h == 0) { - c_cur = 0; - }; - - let name = this.config.prefix + pad(h.toString(), 3, "0") + (i + 1).toString(); - let color = new ColorSwatch(h, c_cur, l_cur, name) - this.colorList.push(color); - h_group[name] = color; - }; - - this.colorDict[h_group_name] = h_group; - - } - } - - public getColorList(): ColorSwatch[] { - return this.colorList; - } - - public getColorDict(): Record> { - return this.colorDict; - } - -} - - -// ============================================================================ -// Export -// ============================================================================ - -export default ColorScheme; diff --git a/script/ts/hue/color/ColorSwatch.ts b/script/ts/hue/color/ColorSwatch.ts deleted file mode 100644 index 15eeed1..0000000 --- a/script/ts/hue/color/ColorSwatch.ts +++ /dev/null @@ -1,338 +0,0 @@ -// script/class/class/DirectoryCleaner.ts - -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// ============================================================================ -// Import -// ============================================================================ - -import Color from 'colorjs.io'; -import { rgb2cmyk, convertRGBtoHex } from '../util.js'; - - -// ============================================================================ -// Classes -// ============================================================================ - -class ColorSwatch { - private name?: string; - private h: number = 0; // Hue (0-360) - private c: number = 0; // Chroma (0-100) - private l: number = 0; // Luminance (0-100) - private model: Color; - - constructor(h: number, c: number, l: number, name?: string) { - if (h < 0 || h > 360 || c < 0 || c > 100 || l < 0 || l > 100) { - throw new Error("Invalid HCL values"); - } - this.h = h; - this.c = c; - this.l = l; - // this.setHCL(h, c, l); - this.name = name; - this.model = new Color("lch", [l, c, h]);; - } - - setHCL(h: number, c: number, l: number): void { - if (h < 0 || h > 360 || c < 0 || c > 100 || l < 0 || l > 100) { - throw new Error("Invalid HCL values"); - } - this.h = h; - this.c = c; - this.l = l; - } - - /// Color Gamut Checks - checkGamut(color_constant: Color): boolean { - let lch_in_gamut = (color_constant.to("lch")).inGamut(); - let srgb_in_gamut = (color_constant.to("srgb")).inGamut(); - let argb_in_gamut = (color_constant.to("a98rgb")).inGamut(); - // console.log(argb_in_gamut); - - let in_gamut; - if ( - lch_in_gamut == false || - srgb_in_gamut == false || - argb_in_gamut == false - ) { - in_gamut = false; - // color_object = new Color("white"); - } else { - in_gamut = true; - - } - return in_gamut; - } - - - - getName(): string | undefined { - return this.name; - } - - // HCL(): [number, number, number] { - // return [this.h, this.c, this.l]; - // } - - getRGB(): [number, number, number] { - // const color_constant = new Color("lch", [l, c, h]); - // let color_object = color_constant - // Convert HCL to RGB here - // This is a non-trivial conversion and may require a detailed algorithm or library - // Placeholder for conversion logic - return [0, 0, 0]; // Replace with actual conversion logic - } - - // Color Space Conversions - // ======================================================================== - - a98rgb() { - let color = this.model.to("a98rgb"); - return color.coords; - } - - a98rgb_linear() { - let color = this.model.to("a98rgb-linear"); - return color.coords; - } - - acescg() { - let color = this.model.to("acescg"); - return color.coords; - } - - hsl() { - let color = this.model.to("hsl"); - return color.coords; - } - - hsv() { - let color = this.model.to("hsv"); - return color.coords; - } - - hwb() { - let color = this.model.to("hwb"); - return color.coords; - } - - ictcp() { - let color = this.model.to("ictcp"); - return color.coords; - } - - jzczhz() { - let color = this.model.to("jzczhz"); - return color.coords; - } - - jzazbz() { - let color = this.model.to("jzazbz"); - return color.coords; - } - - lab() { - let color = this.model.to("lab"); - return color.coords; - } - - lab_d65() { - let color = this.model.to("lab-d65"); - return color.coords; - } - - lch() { - let color = this.model.to("lch"); - return color.coords; - } - - oklch() { - let color = this.model.to("oklch"); - return color.coords; - } - - oklab() { - let color = this.model.to("oklab"); - return color.coords; - } - - p3() { - let color = this.model.to("p3"); - return color.coords; - } - - p3_linear() { - let color = this.model.to("p3-linear"); - return color.coords; - } - - prophoto() { - let color = this.model.to("prophoto"); - return color.coords; - } - - prophoto_linear() { - let color = this.model.to("prophoto-linear"); - return color.coords; - } - - rec2020() { - let color = this.model.to("rec2020"); - return color.coords; - } - - rec2020_linear() { - let color = this.model.to("rec2020-linear"); - return color.coords; - } - - rec2100hlg() { - let color = this.model.to("rec2100hlg"); - return color.coords; - } - - rec2100pq() { - let color = this.model.to("rec2100pq"); - return color.coords; - } - - xyz_abs_d65() { - let color = this.model.to("xyz-abs-d65"); - return color.coords; - } - - xyz_d50() { - let color = this.model.to("xyz-d50"); - return color.coords; - } - - xyz_d65() { - let color = this.model.to("xyz-d65"); - return color.coords; - } - - xyz() { - let color = this.model.to("xyz"); - return color.coords; - } - - srgb() { - let color = this.model.to("srgb"); - return color; - } - - srgb_linear() { - let color = this.model.to("srgb-linear"); - return color.coords; - } - - hex() { - - let color = this.srgb(); - let hex = convertRGBtoHex( - Math.round(color.coords[0]*255), - Math.round(color.coords[1]*255), - Math.round(color.coords[2]*255), - ); - // console.log(color.coords[0]); - return hex; - - } - - hcl() { - - let hcl = { - "h": this.h, - "c": this.c, - "l": this.l, - } - return hcl; - - - } - // rgb() { - // let color = this.srgb(); - - // let rgb = ( - // Math.round(color.coords[0]*255), - // Math.round(color.coords[1]*255), - // Math.round(color.coords[2]*255) - // ); - // return rgb; - - // } - - rgb() { - let color = this.srgb(); - - let rgb = { - "r": Math.round(color.coords[0]*255), - "g": Math.round(color.coords[1]*255), - "b": Math.round(color.coords[2]*255) - } - return rgb; - - } - - // cmyk() { - // let color_srgb = this.srgb; - // let cmyk = rgb2cmyk( - // color_srgb[0], - // color_srgb[1], - // color_srgb[2], - // false - // ); - // let color = this.model.to("srgb-linear"); - // return color.coords; - // } - - - // // Color Strings - // // -------------------------------------------------------- - // let color_css = color_object - - // let color_string_rgb = color_srgb.toString({precision: 3, format: "rgb"}); - // let color_string_rgba = color_srgb.toString({precision: 3, format: "rgba"}); - // let color_string_hex = color_srgb.toString({precision: 3, format: "hex"}); - // let color_string_color = color_srgb.toString({precision: 3, format: "color"}); - - - - - - toString(): string { - const [r, g, b] = this.getRGB(); - return `rgb(${r}, ${g}, ${b})`; - } - - toDict(): Record { - return { - name: this.name, - hcl_h: this.h, - hcl_c: this.c, - hcl_l: this.l, - }; - } - - // Static methods for creating Color from other formats can be added here -} - - -// ============================================================================ -// Export -// ============================================================================ - -export default ColorSwatch; diff --git a/script/ts/hue/config/hue.names.ts b/script/ts/hue/config/hue.names.ts deleted file mode 100644 index 79fd691..0000000 --- a/script/ts/hue/config/hue.names.ts +++ /dev/null @@ -1,97 +0,0 @@ -// hue/config/hue.names.ts - -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// ============================================================================ -// Constants -// ============================================================================ - -const hueNames = { - 0: "Grey", - 15: "Salmon", - 30: "Orange", - 45: "Amber", - 60: "Yellow", // Fixed - 75: "Lime", - 90: "Ecru", - 105: "Olive", - 120: "Green", // Fixed - 135: "Forest", - 150: "Jade", - 165: "Mint", - 180: "Cyan", // Fixed - 195: "Teal", - 210: "Capri", - 225: "Sky", - 240: "Blue", // Fixed - 255: "Azure", - 270: "Indigo", - 285: "Violet", - 300: "Magenta", // Fixed - 315: "Purple", - 330: "Rose", - 345: "Pink", - 360: "Red" // Fixed -}; - - -// ============================================================================ -// Export -// ============================================================================ - -export default hueNames; - - - -// const color_names_10 = { -// 010: " ", -// 020: " ", -// 030: "Orange", -// 040: " ", -// 050: " ", -// 060: "Yellow", -// 070: " ", -// 080: " ", -// 090: " ", -// 100: " ", -// 110: " ", -// 120: "Green", -// 130: " ", -// 140: " ", -// 150: " ", -// 160: " ", -// 170: " ", -// 180: "Cyan", -// 190: " ", -// 200: "Azure", -// 210: " ", -// 220: " ", -// 230: " ", -// 240: "Blue", -// 250: " ", -// 260: " ", -// 270: "Violet", -// 280: " ", -// 290: " ", -// 300: "Magenta", -// 310: " ", -// 320: "Pink", -// 330: " ", -// 340: " ", -// 350: " ", -// 360: "Red" -// }; - diff --git a/script/ts/hue/types.ts b/script/ts/hue/types.ts deleted file mode 100644 index d99f024..0000000 --- a/script/ts/hue/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import Color from 'colorjs.io'; - - -export type PackageJson = { [key: string]: any }; // Define a more specific type if possible -export type ColorScheme =any; -// export type ColorScheme = Record>; -export type BuildFileContent = { [key: string]: any }; // Adjust according to the actual content structure -export type OutputPaths = string[]; // Or define a more complex type if needed diff --git a/script/ts/hue/util.ts b/script/ts/hue/util.ts deleted file mode 100644 index 4497ed6..0000000 --- a/script/ts/hue/util.ts +++ /dev/null @@ -1,52 +0,0 @@ - -// import Color from "https://colorjs.io/dist/color.js"; -// import Chroma from "https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"; - - - -export function rgb2cmyk(r: number, g: number, b: number, normalized: any){ - var c = 1 - (r / 255); - var m = 1 - (g / 255); - var y = 1 - (b / 255); - var k = Math.min(c, Math.min(m, y)); - - c = (c - k) / (1 - k); - m = (m - k) / (1 - k); - y = (y - k) / (1 - k); - - if(!normalized){ - c = Math.round(c * 10000) / 100; - m = Math.round(m * 10000) / 100; - y = Math.round(y * 10000) / 100; - k = Math.round(k * 10000) / 100; - } - - c = isNaN(c) ? 0 : c; - m = isNaN(m) ? 0 : m; - y = isNaN(y) ? 0 : y; - k = isNaN(k) ? 0 : k; - - return { - c: c, - m: m, - y: y, - k: k - } -} - -export function colorToHex(color: { toString: (arg0: number) => any; }) { - var hexadecimal = color.toString(16); - return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal; -} - - -export function convertRGBtoHex(red: any, green: any, blue: any) { - return "#" + colorToHex(red) + colorToHex(green) + colorToHex(blue); -} - - -export function pad(num: string | any[], size: number, char: any) { - num = num.toString(); - while (num.length < size) num = char + num; - return num; -} diff --git a/script/ts/index.ts b/script/ts/index.ts deleted file mode 100644 index d827a91..0000000 --- a/script/ts/index.ts +++ /dev/null @@ -1,283 +0,0 @@ -// script/index.ts - -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - -// ============================================================================ -// Import -// ============================================================================ - -// Import necessary modules and classes -import path from 'path'; - -import { - DirectoryCleaner, - DirectoryCopier, - FileCopier, - StyleProcessor, - PackageCreator, - VersionWriter, - TypeScriptCompiler, - JavaScriptMinifier, - StylizedLogger, - TemplateWriter, - SvgToPngConverter, - gl_installer, - readPackageJson, -} from 'pack.gl'; - -import ColorScheme from './hue/color/ColorScheme.js'; -import hueConfig from "./hue/config/hue.config.js" -import hueNames from "./hue/config/hue.names.js" - - -// ============================================================================ -// Constants -// ============================================================================ - -// Initialize instances of necessary classes -const CONFIG = { - path: { - src: './src', - dist: './dist', - svg_input: './src/svg', - svg_output: './dist/svg', - scss_input: './src/scss', - scss_output: './dist/scss', - css_output: './dist/css', - json_output: './dist', - ts_input: './src/ts', - ts_output: './dist/ts', - ts_output_icons: './src/ts/icons', - js_output: './dist/js', - jinja_input: './src/jinja', - // jinja_output: './dist/js', - }, -}; - - -// ============================================================================ -// Functions -// ============================================================================ - -/** - * Main function to orchestrate the various processes. - * It handles SVG processing, font generation, SVG sprite generation, and SASS - * processing. - */ -async function main() { - - try { - - // Init Logger - // -------------------------------------------------------------------- - - const logger = new StylizedLogger(); - - - // Install .gl libraries - // -------------------------------------------------------------------- - - logger.header('Install .gl libraries'); - await gl_installer(); - - - // Dirs Clean - // -------------------------------------------------------------------- - - const directoryCleaner = new DirectoryCleaner(); - logger.header('Clean Directories'); - directoryCleaner.cleanDirectory(CONFIG.path.dist); - logger.body(`Directory cleaned: ${CONFIG.path.dist}`); - - - // Package JSON - // -------------------------------------------------------------------- - - const localPackageConfig = await readPackageJson('./package.json'); - const packageCreator = new PackageCreator(localPackageConfig); - const packageConfig = packageCreator.config - packageCreator.createPackageJson(CONFIG.path.dist); - - - // Color Generation - // -------------------------------------------------------------------- - - logger.header('Color Generation'); - const colorScheme = new ColorScheme(hueConfig, hueNames); - const color_dict = colorScheme.getColorDict(); - // console.log(color_dict); - - - // Color Writer - // -------------------------------------------------------------------- - - logger.header('Color Writer'); - const template_context = { - colors: color_dict, - name: packageConfig["name"], - version: packageConfig["version"], - website: packageConfig["homepage"], - } - const templater = new TemplateWriter(CONFIG.path.jinja_input, template_context); - await templater.generateToFile('hue.gl.code-snippets.jinja', path.join(CONFIG.path.dist, 'code-snippets', 'hue.gl.code-snippets')); - await templater.generateToFile('hue.gl.inkscape.jinja', path.join(CONFIG.path.dist, 'inkscape', 'hue.gl.inkscape')); - await templater.generateToFile('hue.gl.less.jinja', path.join(CONFIG.path.dist, 'less', 'hue.gl.less')); - await templater.generateToFile('hue.gl.md.jinja', path.join(CONFIG.path.dist, 'md', 'hue.gl.md')); - await templater.generateToFile('hue.gl.oco.jinja', path.join(CONFIG.path.dist, 'oco', 'hue.gl.oco')); - await templater.generateToFile('hue.gl.py.jinja', path.join(CONFIG.path.dist, 'py', 'hue.gl.py')); - await templater.generateToFile('hue.gl.rcpx.jinja', path.join(CONFIG.path.dist, 'rcpx', 'hue.gl.rcpx')); - await templater.generateToFile('hue.gl.sketchpalette.jinja', path.join(CONFIG.path.dist, 'sketchpalette', 'hue.gl.sketchpalette')); - await templater.generateToFile('hue.gl.styl.jinja', path.join(CONFIG.path.dist, 'styl', 'hue.gl.styl')); - await templater.generateToFile('hue.gl.tex.jinja', path.join(CONFIG.path.dist, 'tex', 'hue.gl.tex')); - - await templater.generateToFile('hue.gl-rgb-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-rgb-map.scss')); - await templater.generateToFile('hue.gl-rgb-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-rgb-var.scss')); - await templater.generateToFile('hue.gl-hcl-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hcl-map.scss')); - await templater.generateToFile('hue.gl-hcl-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hcl-var.scss')); - await templater.generateToFile('hue.gl-hex-map.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hex-map.scss')); - await templater.generateToFile('hue.gl-hex-var.scss.jinja', path.join(CONFIG.path.src, 'scss', 'hue', '_hue.gl-hex-var.scss')); - - - await templater.generateToFile('hue.gl.d.ts.jinja', path.join(CONFIG.path.dist, 'ts', 'hue.gl.d.ts')); - - // await templater.generateToFile('hue.gl.css.jinja', path.join(CONFIG.path.dist, 'css', 'hue.gl.css')); - await templater.generateToFile('hue.gl.js.jinja', path.join(CONFIG.path.dist, 'js', 'hue.gl.js')); - // await templater.generateToFile('hue.gl.svg.jinja', path.join(CONFIG.path.dist, 'svg', 'hue.gl.svg')); - - - // Create Swatches - // -------------------------------------------------------------------- - - for (const groupName in color_dict) { - if (color_dict.hasOwnProperty(groupName)) { - console.log(`Group: ${groupName}`); - - // Looping over each color swatch in the group - for (const colorName in color_dict[groupName]) { - if (color_dict[groupName].hasOwnProperty(colorName)) { - const colorSwatch = color_dict[groupName][colorName]; - - // Process each color swatch here - console.log(`Color Name: ${colorName}`); - - const svg_template_context = {color: colorSwatch,} - const svg_templater = new TemplateWriter(CONFIG.path.jinja_input, svg_template_context); - let svg_output_path = path.join(CONFIG.path.dist, 'svg', 'swatch',`${colorName}.svg`) - await svg_templater.generateToFile('square.svg.jinja', svg_output_path); - - const converter = new SvgToPngConverter(); - const svgContent = await svg_templater.generateTemplate('square.svg.jinja'); - let png_output_path = path.join(CONFIG.path.dist, 'png', 'swatch',`${colorName}.png`) - await converter.convert(svgContent, png_output_path, 500, 500) - .then(() => console.log('Conversion successful')) - .catch(error => console.error('Conversion failed:', error)); - } - } - } - } - - - // SASS - // -------------------------------------------------------------------- - - const styleProcessor = new StyleProcessor(); - logger.header('Processing SASS...'); - // Process with expanded style - await styleProcessor.processStyles( - path.join(CONFIG.path.scss_input, 'index.scss'), - path.join(CONFIG.path.css_output, `${packageConfig.name}.css`), - 'expanded' - ); - // Process with compressed style - await styleProcessor.processStyles( - path.join(CONFIG.path.scss_input, 'index.scss'), - path.join(CONFIG.path.css_output, `${packageConfig.name}.min.css`), - 'compressed' - ); - logger.body('SASS Processing completed.'); - - - // Copy Directories - // -------------------------------------------------------------------- - - const directoryCopier = new DirectoryCopier(); - await directoryCopier.recursiveCopy( - CONFIG.path.ts_input, - CONFIG.path.ts_output, - ); - await directoryCopier.recursiveCopy( - CONFIG.path.scss_input, - CONFIG.path.scss_output, - ); - - - // Copy files - // -------------------------------------------------------------------- - - const fileCopier = new FileCopier(); - fileCopier.copyFileToDirectory( - path.join('.', 'README.md'), - CONFIG.path.dist, - ) - fileCopier.copyFileToDirectory( - path.join('.', 'LICENSE'), - CONFIG.path.dist, - ) - - - // Version - // -------------------------------------------------------------------- - - const versionWriter = new VersionWriter(); - await versionWriter.writeVersionToFile('VERSION', packageConfig.version); - - - // Compile TypeScript to JavaScript - // -------------------------------------------------------------------- - const tsCompiler = new TypeScriptCompiler(); - const tsFiles = [ - path.join(CONFIG.path.ts_input, 'index.ts'), - ]; - const outputDir = './dist/js'; - // console.log('Starting TypeScript compilation...'); - await tsCompiler.compile(tsFiles, outputDir); - // console.log('TypeScript compilation completed.'); - - - // Minify JavaScript - // -------------------------------------------------------------------- - const jsMinifier = new JavaScriptMinifier(); - await jsMinifier.minifyFile( - path.join(CONFIG.path.js_output, 'index.js'), - path.join(CONFIG.path.js_output, `${packageConfig.name}.min.js`), - ) - .then(() => console.log('JavaScript minification completed.')) - .catch(console.error); - - - } catch (error) { - console.error('An error occurred:', error); - } - -} - - -// ============================================================================ -// Main -// ============================================================================ - -// Execute the main function -main(); diff --git a/script/ts/utils/ase_decode.ts b/script/ts/utils/ase_decode.ts deleted file mode 100644 index 6a64265..0000000 --- a/script/ts/utils/ase_decode.ts +++ /dev/null @@ -1,141 +0,0 @@ -// var assert = require('assert'); -// var constants = require('./constants'); - -// var errors = { -// header: 'Not a valid .ASE file', -// unexpected: 'Unexpected state. This is a bug!' -// }; - -// function decode(buffer) { - -// if (typeof buffer === 'string') { -// buffer = Buffer(buffer); -// } - -// var output = {}; -// var groups = output.groups = []; -// var colors = output.colors = []; - -// assert(getChar8(0) === 'A', errors.header); -// assert(getChar8(1) === 'S', errors.header); -// assert(getChar8(2) === 'E', errors.header); -// assert(getChar8(3) === 'F', errors.header); - -// output.version = [ -// buffer.readUInt16BE(4), -// buffer.readUInt16BE(6) -// ].join('.'); - -// var blocks = buffer.readUInt32BE(8); -// var state = constants.STATE_GET_MODE; -// var mode = constants.MODE_COLOR; -// var position = 12; -// var blockLength; -// var block; -// var group; -// var color; - -// x: while (position < buffer.length) { -// switch (state) { -// case constants.STATE_GET_MODE: readBlockMode(); continue x; -// case constants.STATE_GET_LENGTH: readBlockLength(); continue x; -// case constants.STATE_GET_NAME: readBlockName(); continue x; -// case constants.STATE_GET_MODEL: readBlockModel(); continue x; -// case constants.STATE_GET_COLOR: readBlockColor(); continue x; -// case constants.STATE_GET_TYPE: readBlockType(); continue x; -// } -// throw new Error(errors.unexpected); -// } - -// return output; - -// function readBlockMode() { -// switch (buffer.readUInt16BE(position)) { -// case constants.COLOR_START: -// colors.push(block = color = {}); -// mode = constants.MODE_COLOR; -// break; -// case constants.GROUP_START: -// groups.push(block = group = { colors: [] }); -// mode = constants.MODE_GROUP; -// break; -// case constants.GROUP_END: -// group = null; -// break; - -// default: -// throw new Error('Unexpected block type at byte #' + position); -// } - -// if (group && block === color) { -// group.colors.push(color); -// } - -// position += 2; -// state = constants.STATE_GET_LENGTH; -// } - -// function readBlockLength() { -// //doesn't appear to be reading the block length correctly -// //does on the first block, but then fails on the second. -// blockLength = buffer.readUInt32BE(position); -// position += 4; -// state = constants.STATE_GET_NAME; -// } - -// function readBlockName() { -// var length = buffer.readUInt16BE(position); -// var name = ''; -// while (--length) { -// name += getChar16(position += 2); -// } -// position += 4; -// block.name = name; -// if(mode === constants.MODE_GROUP) { -// state = constants.STATE_GET_MODE; -// } -// else { -// state = constants.STATE_GET_MODEL; -// } -// } - -// function readBlockModel() { -// block.model = ( -// getChar8(position++) + -// getChar8(position++) + -// getChar8(position++) + -// getChar8(position++) -// ).trim(); -// state = constants.STATE_GET_COLOR; -// } - -// function readBlockColor() { -// var model = block.model.toUpperCase(); -// var count = constants.COLOR_SIZES[model]; -// var channels = []; - -// while (count--) { -// channels.push(buffer.readFloatBE(position)); -// position += 4; -// } - -// block.color = channels; -// state = constants.STATE_GET_TYPE; -// } - -// function readBlockType() { -// block.type = constants.READ_COLOR_TYPES[buffer.readUInt16BE(position)]; -// position += 2; -// state = constants.STATE_GET_MODE; -// } - -// function getChar8(index) { -// return String.fromCharCode(buffer.readUInt8(index)); -// } - -// function getChar16(index) { -// return String.fromCharCode(buffer.readUInt16BE(index)); -// } -// } - -// module.exports = decode; \ No newline at end of file diff --git a/script/ts/utils/ase_encode.ts b/script/ts/utils/ase_encode.ts deleted file mode 100644 index 9b2c5ca..0000000 --- a/script/ts/utils/ase_encode.ts +++ /dev/null @@ -1,58 +0,0 @@ -var ByteBuffer = require('bytebuffer'); -var constants = require('./constants'); - -function encode(data: { colors: string | any[]; }) { - - var colors = data.colors, - numberOfSwatches = data.colors.length, - //numberOfSwatches = 2, - ase = new ByteBuffer(); - - ase.writeUTF8String(constants.FILE_SIGNATURE); - ase.writeInt(constants.FORMAT_VERSION); - ase.writeInt(numberOfSwatches); // number of blocks - - for (var i = 0; i < numberOfSwatches; i++) { - - var color = colors[i], - swatch = new ByteBuffer(), - j=null; - - // block type - // (0xc001 ⇒ Group start, 0xc002 ⇒ Group end, 0x0001 ⇒ Color entry) - ase.writeShort(constants.COLOR_START); - - // Group/Color name - // 0-terminated string of length (uint16) double-byte characters - swatch.writeShort(color.name.length + 1); - for(j=0; j < color.name.length; j++) { - swatch.writeShort(color.name.charCodeAt(j)); - } - swatch.writeShort(0); // terminate with 0 - - // color model - 4*char (CMYK, RGB, LAB or Gray) - var model = color.model.length == 4 ? color.model : color.model + " "; - swatch.writeUTF8String(model); - - // color values - // CMYK ⇒ 4*float32 / RGB & LAB ⇒ 3*float32 / Gray ⇒ 1*float32 - for(j=0; j < constants.COLOR_SIZES[color.model.toUpperCase()]; j++) { - swatch.writeFloat(color.color[j]); - } - - // color type - 1*int16 (0 ⇒ Global, 1 ⇒ Spot, 2 ⇒ Normal) - swatch.writeShort(constants.WRITE_COLOR_TYPES[color.type]); - - // block length - 1*int32 - ase.writeInt(swatch.offset); - - // add to ase buffer - swatch.flip(); - ase.append(swatch); - } - - ase.flip(); - return ase.toBuffer(); -} - -module.exports = encode; \ No newline at end of file diff --git a/script/ts/utils/ase_test.json b/script/ts/utils/ase_test.json deleted file mode 100644 index 07b601c..0000000 --- a/script/ts/utils/ase_test.json +++ /dev/null @@ -1,1284 +0,0 @@ -{ - "groups":[ - - ], - "colors":[ - { - "name":"RGB Red", - "model":"RGB", - "color":[ - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"RGB Yellow", - "model":"RGB", - "color":[ - 1, - 1, - 0 - ], - "type":"global" - }, - { - "name":"RGB Green", - "model":"RGB", - "color":[ - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"RGB Cyan", - "model":"RGB", - "color":[ - 0, - 1, - 1 - ], - "type":"global" - }, - { - "name":"RGB Blue", - "model":"RGB", - "color":[ - 0, - 0, - 1 - ], - "type":"global" - }, - { - "name":"RGB Magenta", - "model":"RGB", - "color":[ - 1, - 0, - 1 - ], - "type":"global" - }, - { - "name":"White", - "model":"Gray", - "color":[ - 1 - ], - "type":"global" - }, - { - "name":"10% Gray", - "model":"Gray", - "color":[ - 0.8999999761581421 - ], - "type":"global" - }, - { - "name":"15% Gray", - "model":"Gray", - "color":[ - 0.8499999642372131 - ], - "type":"global" - }, - { - "name":"20% Gray", - "model":"Gray", - "color":[ - 0.7999999523162842 - ], - "type":"global" - }, - { - "name":"25% Gray", - "model":"Gray", - "color":[ - 0.75 - ], - "type":"global" - }, - { - "name":"30% Gray", - "model":"Gray", - "color":[ - 0.699999988079071 - ], - "type":"global" - }, - { - "name":"35% Gray", - "model":"Gray", - "color":[ - 0.6499999761581421 - ], - "type":"global" - }, - { - "name":"40% Gray", - "model":"Gray", - "color":[ - 0.5999999642372131 - ], - "type":"global" - }, - { - "name":"45% Gray", - "model":"Gray", - "color":[ - 0.550000011920929 - ], - "type":"global" - }, - { - "name":"50% Gray", - "model":"Gray", - "color":[ - 0.5 - ], - "type":"global" - }, - { - "name":"CMYK Red", - "model":"CMYK", - "color":[ - 0, - 1, - 1, - 0 - ], - "type":"global" - }, - { - "name":"CMYK Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"CMYK Green", - "model":"CMYK", - "color":[ - 1, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"CMYK Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0, - 0 - ], - "type":"global" - }, - { - "name":"CMYK Blue", - "model":"CMYK", - "color":[ - 1, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"CMYK Magenta", - "model":"CMYK", - "color":[ - 0, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"55% Gray", - "model":"Gray", - "color":[ - 0.44999998807907104 - ], - "type":"global" - }, - { - "name":"60% Gray", - "model":"Gray", - "color":[ - 0.3999999761581421 - ], - "type":"global" - }, - { - "name":"65% Gray", - "model":"Gray", - "color":[ - 0.3499999940395355 - ], - "type":"global" - }, - { - "name":"70% Gray", - "model":"Gray", - "color":[ - 0.29999998211860657 - ], - "type":"global" - }, - { - "name":"75% Gray", - "model":"Gray", - "color":[ - 0.25 - ], - "type":"global" - }, - { - "name":"80% Gray", - "model":"Gray", - "color":[ - 0.19999998807907104 - ], - "type":"global" - }, - { - "name":"85% Gray", - "model":"Gray", - "color":[ - 0.14999999105930328 - ], - "type":"global" - }, - { - "name":"90% Gray", - "model":"Gray", - "color":[ - 0.09999999403953552 - ], - "type":"global" - }, - { - "name":"95% Gray", - "model":"Gray", - "color":[ - 0.04999999701976776 - ], - "type":"global" - }, - { - "name":"Black", - "model":"Gray", - "color":[ - 0 - ], - "type":"global" - }, - { - "name":"Pastel Red", - "model":"CMYK", - "color":[ - 0, - 0.5, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Red Orange", - "model":"CMYK", - "color":[ - 0, - 0.3800048828125, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Yellow Orange", - "model":"CMYK", - "color":[ - 0, - 0.250091552734375, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Pea Green", - "model":"CMYK", - "color":[ - 0.250091552734375, - 0, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Yellow Green", - "model":"CMYK", - "color":[ - 0.3800048828125, - 0, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Green", - "model":"CMYK", - "color":[ - 0.5, - 0, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Green Cyan", - "model":"CMYK", - "color":[ - 0.5, - 0, - 0.250091552734375, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Cyan", - "model":"CMYK", - "color":[ - 0.5, - 0, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Cyan Blue", - "model":"CMYK", - "color":[ - 0.5, - 0.250091552734375, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Blue", - "model":"CMYK", - "color":[ - 0.5, - 0.3800048828125, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Blue Violet", - "model":"CMYK", - "color":[ - 0.5, - 0.5, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Violet", - "model":"CMYK", - "color":[ - 0.3800048828125, - 0.5, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Violet Magenta", - "model":"CMYK", - "color":[ - 0.250091552734375, - 0.5, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Magenta", - "model":"CMYK", - "color":[ - 0, - 0.5, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pastel Magenta Red", - "model":"CMYK", - "color":[ - 0, - 0.5, - 0.250091552734375, - 0 - ], - "type":"global" - }, - { - "name":"Light Red", - "model":"CMYK", - "color":[ - 0, - 0.720001220703125, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Red Orange", - "model":"CMYK", - "color":[ - 0, - 0.54010009765625, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Yellow Orange", - "model":"CMYK", - "color":[ - 0, - 0.360107421875, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Pea Green", - "model":"CMYK", - "color":[ - 0.360107421875, - 0, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Yellow Green", - "model":"CMYK", - "color":[ - 0.54010009765625, - 0, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Green", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0, - 0.720001220703125, - 0 - ], - "type":"global" - }, - { - "name":"Light Green Cyan", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0, - 0.360107421875, - 0 - ], - "type":"global" - }, - { - "name":"Light Cyan", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Cyan Blue", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0.360107421875, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Blue", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0.54010009765625, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Blue Violet", - "model":"CMYK", - "color":[ - 0.720001220703125, - 0.720001220703125, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Violet", - "model":"CMYK", - "color":[ - 0.54010009765625, - 0.720001220703125, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Violet Magenta", - "model":"CMYK", - "color":[ - 0.360107421875, - 0.720001220703125, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Magenta", - "model":"CMYK", - "color":[ - 0, - 0.720001220703125, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Light Magenta Red", - "model":"CMYK", - "color":[ - 0, - 0.720001220703125, - 0.360107421875, - 0 - ], - "type":"global" - }, - { - "name":"Pure Red", - "model":"CMYK", - "color":[ - 0, - 1, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Red Orange", - "model":"CMYK", - "color":[ - 0, - 0.75, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Yellow Orange", - "model":"CMYK", - "color":[ - 0, - 0.5, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Pea Green", - "model":"CMYK", - "color":[ - 0.5, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Yellow Green", - "model":"CMYK", - "color":[ - 0.75, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Green", - "model":"CMYK", - "color":[ - 1, - 0, - 1, - 0 - ], - "type":"global" - }, - { - "name":"Pure Green Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Pure Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Cyan Blue", - "model":"CMYK", - "color":[ - 1, - 0.5, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Blue", - "model":"CMYK", - "color":[ - 1, - 0.75, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Blue Violet", - "model":"CMYK", - "color":[ - 1, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Violet", - "model":"CMYK", - "color":[ - 0.75, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Violet Magenta", - "model":"CMYK", - "color":[ - 0.5, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Magenta", - "model":"CMYK", - "color":[ - 0, - 1, - 0, - 0 - ], - "type":"global" - }, - { - "name":"Pure Magenta Red", - "model":"CMYK", - "color":[ - 0, - 1, - 0.5, - 0 - ], - "type":"global" - }, - { - "name":"Dark Red", - "model":"CMYK", - "color":[ - 0, - 1, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Red Orange", - "model":"CMYK", - "color":[ - 0, - 0.75, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Yellow Orange", - "model":"CMYK", - "color":[ - 0, - 0.5, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Pea Green", - "model":"CMYK", - "color":[ - 0.5, - 0, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Yellow Green", - "model":"CMYK", - "color":[ - 0.75, - 0, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Green", - "model":"CMYK", - "color":[ - 1, - 0, - 1, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Green Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0.5, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Cyan Blue", - "model":"CMYK", - "color":[ - 1, - 0.5, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Blue", - "model":"CMYK", - "color":[ - 1, - 0.75, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Blue Violet", - "model":"CMYK", - "color":[ - 1, - 1, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Violet", - "model":"CMYK", - "color":[ - 0.75, - 1, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Violet Magenta", - "model":"CMYK", - "color":[ - 0.5, - 1, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Magenta", - "model":"CMYK", - "color":[ - 0, - 1, - 0, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Dark Magenta Red", - "model":"CMYK", - "color":[ - 0, - 1, - 0.5, - 0.399993896484375 - ], - "type":"global" - }, - { - "name":"Darker Red", - "model":"CMYK", - "color":[ - 0, - 1, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Red Orange", - "model":"CMYK", - "color":[ - 0, - 0.75, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Yellow Orange", - "model":"CMYK", - "color":[ - 0, - 0.5, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Yellow", - "model":"CMYK", - "color":[ - 0, - 0, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Pea Green", - "model":"CMYK", - "color":[ - 0.5, - 0, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Yellow Green", - "model":"CMYK", - "color":[ - 0.75, - 0, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Green", - "model":"CMYK", - "color":[ - 1, - 0, - 1, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Green Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0.5, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Cyan", - "model":"CMYK", - "color":[ - 1, - 0, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Cyan Blue", - "model":"CMYK", - "color":[ - 1, - 0.5, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Blue", - "model":"CMYK", - "color":[ - 1, - 0.75, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Blue Violet", - "model":"CMYK", - "color":[ - 1, - 1, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Violet", - "model":"CMYK", - "color":[ - 0.75, - 1, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Violet Magenta", - "model":"CMYK", - "color":[ - 0.5, - 1, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Magenta", - "model":"CMYK", - "color":[ - 0, - 1, - 0, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Darker Magenta Red", - "model":"CMYK", - "color":[ - 0, - 1, - 0.5, - 0.600006103515625 - ], - "type":"global" - }, - { - "name":"Pale Cool Brown", - "model":"CMYK", - "color":[ - 0, - 0.1199951171875, - 0.250091552734375, - 0.250091552734375 - ], - "type":"global" - }, - { - "name":"Light Cool Brown", - "model":"CMYK", - "color":[ - 0.18829345703125, - 0.27850341796875, - 0.3765869140625, - 0.313690185546875 - ], - "type":"global" - }, - { - "name":"Medium Cool Brown", - "model":"CMYK", - "color":[ - 0.3765869140625, - 0.435302734375, - 0.502105712890625, - 0.3765869140625 - ], - "type":"global" - }, - { - "name":"Dark Cool Brown", - "model":"CMYK", - "color":[ - 0.564788818359375, - 0.596099853515625, - 0.62750244140625, - 0.435302734375 - ], - "type":"global" - }, - { - "name":"Darker Cool Brown", - "model":"CMYK", - "color":[ - 0.75, - 0.75, - 0.75, - 0.5 - ], - "type":"global" - }, - { - "name":"Pale Warm Brown", - "model":"CMYK", - "color":[ - 0, - 0.250091552734375, - 0.5, - 0.250091552734375 - ], - "type":"global" - }, - { - "name":"Light Warm Brown", - "model":"CMYK", - "color":[ - 0.10211181640625, - 0.36480712890625, - 0.623504638671875, - 0.313690185546875 - ], - "type":"global" - }, - { - "name":"Medium Warm Brown", - "model":"CMYK", - "color":[ - 0.20001220703125, - 0.4744873046875, - 0.749114990234375, - 0.3765869140625 - ], - "type":"global" - }, - { - "name":"Dark Warm Brown", - "model":"CMYK", - "color":[ - 0.302093505859375, - 0.588287353515625, - 0.87451171875, - 0.435302734375 - ], - "type":"global" - }, - { - "name":"Darker Warm Brown", - "model":"CMYK", - "color":[ - 0.399993896484375, - 0.70001220703125, - 1, - 0.5 - ], - "type":"global" - } - ], - "version":"1.0" -} \ No newline at end of file diff --git a/script/tsconfig.json b/script/tsconfig.json deleted file mode 100644 index 4e376b4..0000000 --- a/script/tsconfig.json +++ /dev/null @@ -1,99 +0,0 @@ -// tsconfig.json - -{ - - "$schema": "https://json.schemastore.org/tsconfig", - "display": "ESM", - - "compilerOptions": { - - /* Visit https://aka.ms/tsconfig.json to read more about this file */ - - /* Language and Environment */ - "target": "es2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ - "lib": ["esnext", "es2017", "ES2015", "dom"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ - "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - - /* Modules */ - "module": "esnext", /* Specify what module code is generated. */ - "rootDir": "./ts", /* Specify the root folder within your source files. */ - "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ - //"baseUrl": "src" /* Specify the base directory to resolve non-relative module names. */, - // "paths": { - // "@/*": ["./*"], - // "#/*": ["./*"] - // }, - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - "typeRoots": [ /* Specify multiple folders that act like `./node_modules/@types`. */ - "node_modules/@types" - ], - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - "resolveJsonModule": true, /* Enable importing .json files */ - // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */, - "checkJs": false /* Enable error reporting in type-checked JavaScript files. */, - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ - - - /* Emit */ - // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ - "outDir": "./js", /* Specify an output folder for all emitted files. */ - "removeComments": true, /* Disable emitting comments. */ - "noImplicitReturns": true, - "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - "downlevelIteration": false, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - "noEmitOnError": false, /* Disable emitting files if any type checking errors are reported. */ - - - /* Interop Constraints */ - "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ - "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ - - /* Type Checking */ - "strict": true /* Enable all strict type-checking options. */, - "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ - "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ - "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ - "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ - "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ - - /* Completeness */ - "skipLibCheck": true /* Skip type checking all .d.ts files. */ - - }, - - "ts-node": { - "esm": true, - "experimentalSpecifierResolution": "node" - }, - - "include": [ - // "src/**/*", - // "src/**/*.ts", - // "script/**/*", - // "src/index.ts.xxx", - // "src/index.ts.xxx", - // "script/release.ts", - "./ts/**/*.ts", - // "tmp/SvgOptimizer.ts", - - ], - - "exclude": [ - "**/*.spec.ts", - "node_modules", - "dist", - "public", - "build", - "tmp" - ] - -} diff --git a/src/scss/index.scss b/src/scss/index.scss index 807b214..0defd3f 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -19,7 +19,7 @@ * * @description Color System * @author Scape Agency (https://www.scape.agency) -* @version v0.0.1 +* @version v0.1.0 * @copyright 2020-2023 Scape Agency (https://www.scape.agency) * @website https://www.hue.gl/ * @repository https://github.com/scape-agency/hue.gl/ @@ -28,14 +28,6 @@ @use "sass:math"; -/** -TABLE OF CONTENTS -=============================================================================== -1. -2. -3. -*/ - @import "hue/_hue.gl-hex-map.scss"; @import "hue/_hue.gl-hex-var.scss"; diff --git a/src/scss/utils/_base.scss b/src/scss/utils/_base.scss index 5f2ffac..9f07488 100644 --- a/src/scss/utils/_base.scss +++ b/src/scss/utils/_base.scss @@ -14,7 +14,9 @@ - +// ============================================================================ +// Utilities | Base +// ============================================================================ // Color Getter Function @@ -29,4 +31,16 @@ @warn "Unknown `#{$color_name}` in `$hue`."; @return null; } -} \ No newline at end of file +} + + + +// CSS Variables Generator +// ---------------------------------------------------------------------------- +// A mixin to generate CSS variables from your SCSS map. + +:root { + @each $color_name, $color-value in $hue { + --color-#{$color_name}: #{$color-value}; + } +} diff --git a/src/scss/utils/_blend.scss b/src/scss/utils/_blend.scss new file mode 100644 index 0000000..0a3c4b9 --- /dev/null +++ b/src/scss/utils/_blend.scss @@ -0,0 +1,43 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Utilities | Blend +// ============================================================================ + + +// Gradient Mixin +// ---------------------------------------------------------------------------- +// Create a mixin for generating gradients with your color palette. + +@mixin gradient_bg($start_color_name, $end_color_name) { + background: linear-gradient( + hue_color($start_color_name), + hue_color($end_color_name) + ); +} + + +// Color Blending Mixin +// ---------------------------------------------------------------------------- +// A mixin to blend two colors from your color map. + +@mixin blend_colors($color1_name, $color2_name, $percentage: 50%) { + $color1: hue_color($color1_name); + $color2: hue_color($color2_name); + background-color: mix($color1, $color2, $percentage); +} + + diff --git a/src/scss/utils/_contrast.scss b/src/scss/utils/_contrast.scss index ca459cb..b2ba610 100644 --- a/src/scss/utils/_contrast.scss +++ b/src/scss/utils/_contrast.scss @@ -13,7 +13,9 @@ // limitations under the License. - +// ============================================================================ +// Utilities | Contrast +// ============================================================================ // Contrast Function @@ -54,4 +56,15 @@ } @else { @return white; } +} + + +// Accessibility Mixin +// ---------------------------------------------------------------------------- +// A mixin to ensure text color contrasts well with its background for +// accessibility. + +@mixin accessible_text_color($background_color_name) { + $background-color: hue_color($background_color_name); + color: color_contrast_checker($background-color); } \ No newline at end of file diff --git a/src/scss/utils/_helpers.scss b/src/scss/utils/_helpers.scss new file mode 100644 index 0000000..5d499d0 --- /dev/null +++ b/src/scss/utils/_helpers.scss @@ -0,0 +1,77 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Utilities | Helpers +// ============================================================================ + + +// Component Helpers +// ---------------------------------------------------------------------------- + +// Mixins for Text and Background Colors: These mixins can be used to apply +// text and background colors throughout your stylesheets. +// They make it easy to maintain consistency and make changes later if needed. + +@mixin text_color($color_name) { + color: hue_color($color_name); +} + +@mixin bg_color($color_name) { + background-color: hue_color($color_name); +} + +@mixin border-color($color_name) { + border-color: hue_color($color_name); +} + + +// Themed Components +// ---------------------------------------------------------------------------- +// Create a set of mixins for theming components. +// This can include buttons, links, etc. + +@mixin button_theme($bg_color_name, $text_color_name: null) { + @include bg_color($bg_color_name); + @if $text_color_name != null { + @include text_color($text_color_name); + } @else { + @include accessible_text_color($bg_color_name); + } + // Add more button styles here +} + + +// Utility Classes Generation +// ---------------------------------------------------------------------------- +// This step involves creating utility classes +// for each color in your map. It generates classes like .text-N0001, +// .bg-N0001, etc., for quick and easy styling in HTML. + +@each $color_name, $color-value in $hue { + + .text-#{$color_name} { + @include text_color($color_name); + } + + .bg-#{$color_name} { + @include bg_color($color_name); + } + + .border-#{$color_name} { + @include border-color($color_name); + } + +} diff --git a/src/scss/utils/_scheme.scss b/src/scss/utils/_scheme.scss new file mode 100644 index 0000000..23e32e2 --- /dev/null +++ b/src/scss/utils/_scheme.scss @@ -0,0 +1,29 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Utilities | Scheme +// ============================================================================ + +// Complementary Color Function +// ---------------------------------------------------------------------------- +// A function to find the complementary color on the color wheel, useful for +// creating color schemes. + +@function complementary_color($color_name) { + $base-color: hue_color($color_name); + @return adjust-hue($base-color, 180deg); +} \ No newline at end of file diff --git a/src/scss/utils/_utils.scss b/src/scss/utils/_utils.scss deleted file mode 100644 index e9b9edd..0000000 --- a/src/scss/utils/_utils.scss +++ /dev/null @@ -1,143 +0,0 @@ -// Copyright 2023 Scape Agency BV - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - - - -// ============================================================================ -// Functions -// ============================================================================ - - - - - - -// Complementary Color Function -// ---------------------------------------------------------------------------- -// A function to find the complementary color on the color wheel, useful for -// creating color schemes. -@function complementary-color($color_name) { - $base-color: hue_color($color_name); - @return adjust-hue($base-color, 180deg); - } - -// Opacity Variants: Create a function to generate color variants with different opacities. - -@function hue_color-opacity($color_name, $opacity: 1) { - $color: hue_color($color_name); - @if $color != null { - @return rgba($color, $opacity); - } @else { - @return null; - } - } - -// Color Shades and Tints: Create functions to lighten and darken colors. This is useful for hover states, disabled states, or gradients. - @function hue_shade($color_name, $amount: 10%) { - $color: hue_color($color_name); - @return darken($color, $amount); - } - - @function hue_tint($color_name, $amount: 10%) { - $color: hue_color($color_name); - @return lighten($color, $amount); - } - - -// ============================================================================ -// Mixins -// ============================================================================ - -// Mixins for Text and Background Colors: These mixins can be used to apply -// text and background colors throughout your stylesheets. -// They make it easy to maintain consistency and make changes later if needed. - -@mixin text-color($color_name) { - color: hue_color($color_name); -} - -@mixin bg-color($color_name) { - background-color: hue_color($color_name); -} - -@mixin border-color($color_name) { - border-color: hue_color($color_name); - } - - -// Accessibility Mixin: A mixin to ensure text color contrasts well with its background for accessibility. - @mixin accessible-text-color($background-color_name) { - $background-color: hue_color($background-color_name); - color: contrast-color($background-color); - } - -// Gradient Mixin: Create a mixin for generating gradients with your color palette. - - - @mixin gradient-bg($start-color_name, $end-color_name) { - background: linear-gradient(hue_color($start-color_name), hue_color($end-color_name)); - } - -// Themed Components: Create a set of mixins for theming components. This can include buttons, links, etc. -@mixin button-theme($bg-color_name, $text-color_name: null) { - @include bg-color($bg-color_name); - @if $text-color_name != null { - @include text-color($text-color_name); - } @else { - @include accessible-text-color($bg-color_name); - } - // Add more button styles here - } - -// Color Blending Mixin: A mixin to blend two colors from your color map. - - - @mixin blend-colors($color1-name, $color2-name, $percentage: 50%) { - $color1: hue_color($color1-name); - $color2: hue_color($color2-name); - background-color: mix($color1, $color2, $percentage); - } - -// ============================================================================ -// Classes -// ============================================================================ - - // Utility Classes Generation: This step involves creating utility classes - // for each color in your map. It generates classes like .text-N0001, - // .bg-N0001, etc., for quick and easy styling in HTML. - - @each $color_name, $color-value in $hue { - - .text-#{$color_name} { - @include text-color($color_name); - } - - .bg-#{$color_name} { - @include bg-color($color_name); - } - - .border-#{$color_name} { - @include border-color($color_name); - } - -} - -// CSS Variables Generator: If you prefer using CSS variables, create a mixin to generate them from your SCSS map. - -:root { - @each $color_name, $color-value in $hue { - --color-#{$color_name}: #{$color-value}; - } - } - \ No newline at end of file diff --git a/src/scss/utils/_variants.scss b/src/scss/utils/_variants.scss new file mode 100644 index 0000000..9c0874f --- /dev/null +++ b/src/scss/utils/_variants.scss @@ -0,0 +1,49 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Utilities | Variants +// ============================================================================ + + +// Opacity Variants +// Create a function to generate color variants with different opacities. +// ---------------------------------------------------------------------------- + +@function hue_color_opacity($color_name, $opacity: 1) { + $color: hue_color($color_name); + @if $color != null { + @return rgba($color, $opacity); + } @else { + @return null; + } +} + + +// Color Shades and Tints +// ---------------------------------------------------------------------------- +// Create functions to lighten and darken colors. This is useful for hover +// states, disabled states, or gradients. + +@function hue_shade($color_name, $amount: 10%) { + $color: hue_color($color_name); + @return darken($color, $amount); +} + +@function hue_tint($color_name, $amount: 10%) { + $color: hue_color($color_name); + @return lighten($color, $amount); +} diff --git a/src/scss/utils/utils.scss b/src/scss/utils/utils.scss index 11262fd..6873acb 100644 --- a/src/scss/utils/utils.scss +++ b/src/scss/utils/utils.scss @@ -13,13 +13,13 @@ // limitations under the License. - - - +// ============================================================================ +// Colour Utilities +// ============================================================================ @import "_base.scss"; - - @import "_contrast.scss"; - -@import "_utils.scss"; +@import "_variants.scss"; +@import "_blend.scss"; +@import "_scheme.scss"; +@import "_helpers.scss";