diff --git a/deno.lock b/deno.lock index 01af9eaaba..341df5c956 100644 --- a/deno.lock +++ b/deno.lock @@ -1,5 +1,5 @@ { - "version": "4", + "version": "5", "specifiers": { "jsr:@std/assert@^1.0.9": "1.0.9", "jsr:@std/cli@^1.0.8": "1.0.8", @@ -17,6 +17,7 @@ "npm:handlebars@4.7.8": "4.7.8", "npm:json-schema-to-typescript@^15.0.3": "15.0.3", "npm:less@4.2.1": "4.2.1", + "npm:playwright@^1.57.0": "1.57.0", "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.49", "npm:postcss-value-parser@4.2.0": "4.2.0", "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", @@ -364,7 +365,8 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" }, "cssesc@3.0.0": { - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true }, "csso@5.0.5": { "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", @@ -422,7 +424,8 @@ "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dependencies": [ "prr" - ] + ], + "bin": true }, "error-ex@1.3.2": { "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", @@ -459,6 +462,9 @@ "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", "dependencies": [ "picomatch@4.0.2" + ], + "optionalPeers": [ + "picomatch@4.0.2" ] }, "file-entry-cache@9.1.0": { @@ -483,6 +489,11 @@ "flatted@3.3.2": { "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==" }, + "fsevents@2.3.2": { + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "os": ["darwin"], + "scripts": true + }, "glob-parent@5.1.2": { "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dependencies": [ @@ -526,9 +537,12 @@ "minimist", "neo-async", "source-map", - "uglify-js", "wordwrap" - ] + ], + "optionalDependencies": [ + "uglify-js" + ], + "bin": true }, "has-flag@4.0.0": { "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" @@ -549,7 +563,8 @@ "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" }, "image-size@0.5.5": { - "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==" + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "bin": true }, "import-fresh@3.3.0": { "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", @@ -598,7 +613,8 @@ "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dependencies": [ "argparse" - ] + ], + "bin": true }, "json-buffer@3.0.1": { "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" @@ -618,7 +634,8 @@ "minimist", "prettier", "tinyglobby" - ] + ], + "bin": true }, "json-schema-traverse@1.0.0": { "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" @@ -639,16 +656,19 @@ "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", "dependencies": [ "copy-anything", + "parse-node-version", + "tslib" + ], + "optionalDependencies": [ "errno", "graceful-fs", "image-size", "make-dir", "mime", "needle", - "parse-node-version", - "source-map", - "tslib" - ] + "source-map" + ], + "bin": true }, "lines-and-columns@1.2.4": { "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" @@ -692,7 +712,8 @@ ] }, "mime@1.6.0": { - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": true }, "minimist@1.2.8": { "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" @@ -701,14 +722,16 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "nanoid@3.3.8": { - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==" + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "bin": true }, "needle@3.3.1": { "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", "dependencies": [ "iconv-lite", "sax" - ] + ], + "bin": true }, "neo-async@2.6.2": { "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" @@ -755,6 +778,20 @@ "pify@4.0.1": { "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" }, + "playwright-core@1.57.0": { + "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==", + "bin": true + }, + "playwright@1.57.0": { + "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==", + "dependencies": [ + "playwright-core" + ], + "optionalDependencies": [ + "fsevents" + ], + "bin": true + }, "postcss-less@6.0.0_postcss@8.4.49": { "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", "dependencies": [ @@ -789,7 +826,8 @@ ] }, "prettier@3.4.2": { - "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "bin": true }, "prr@1.0.1": { "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==" @@ -822,7 +860,8 @@ "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" }, "semver@5.7.2": { - "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==" + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": true }, "signal-exit@4.1.0": { "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" @@ -912,7 +951,8 @@ "svg-tags", "table", "write-file-atomic" - ] + ], + "bin": true }, "supports-color@7.2.0": { "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", @@ -940,7 +980,8 @@ "css-what", "csso", "picocolors" - ] + ], + "bin": true }, "table@6.9.0": { "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", @@ -975,7 +1016,8 @@ "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" }, "uglify-js@3.19.3": { - "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==" + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "bin": true }, "undici-types@6.19.8": { "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" @@ -999,7 +1041,8 @@ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dependencies": [ "isexe" - ] + ], + "bin": true }, "wordwrap@1.0.0": { "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" diff --git a/styles/google/scripts/color-index.ts b/styles/google/scripts/color-index.ts new file mode 100644 index 0000000000..d89cbc137e --- /dev/null +++ b/styles/google/scripts/color-index.ts @@ -0,0 +1,6 @@ +import { M3Token2025Spec } from "./gm3"; + +export const ctpM3: Record = { + '#fff': "surface", + '#000': "onSurface", +} diff --git a/styles/google/scripts/deno.json b/styles/google/scripts/deno.json new file mode 100644 index 0000000000..59fc6ddee9 --- /dev/null +++ b/styles/google/scripts/deno.json @@ -0,0 +1,30 @@ +{ + "imports": { + "@/": "./", + "color": "npm:color@^5.0.3", + "playwright": "npm:playwright@1.56.0", + "user-agents": "npm:user-agents@^1.1.669" + }, + "tasks": { + "build": "deno run -A ./main.ts" + }, + "compilerOptions": { + "lib": [ + "deno.window", + "deno.unstable", + "node", + "dom" + ] + }, + "nodeModulesDir": "auto", + "lint": { + "rules": { + "tags": [ + "recommended" + ], + "include": [ + "verbatim-module-syntax" + ] + } + } +} diff --git a/styles/google/scripts/deno.lock b/styles/google/scripts/deno.lock new file mode 100644 index 0000000000..cd7300297c --- /dev/null +++ b/styles/google/scripts/deno.lock @@ -0,0 +1,67 @@ +{ + "version": "5", + "specifiers": { + "npm:color@^5.0.3": "5.0.3", + "npm:playwright@1.56.0": "1.56.0", + "npm:user-agents@^1.1.669": "1.1.669" + }, + "npm": { + "color-convert@3.1.3": { + "integrity": "sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg==", + "dependencies": [ + "color-name" + ] + }, + "color-name@2.1.0": { + "integrity": "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==" + }, + "color-string@2.1.4": { + "integrity": "sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==", + "dependencies": [ + "color-name" + ] + }, + "color@5.0.3": { + "integrity": "sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==", + "dependencies": [ + "color-convert", + "color-string" + ] + }, + "fsevents@2.3.2": { + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "os": ["darwin"], + "scripts": true + }, + "lodash.clonedeep@4.5.0": { + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" + }, + "playwright-core@1.56.0": { + "integrity": "sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==", + "bin": true + }, + "playwright@1.56.0": { + "integrity": "sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==", + "dependencies": [ + "playwright-core" + ], + "optionalDependencies": [ + "fsevents" + ], + "bin": true + }, + "user-agents@1.1.669": { + "integrity": "sha512-pbIzG+AOqCaIpySKJ4IAm1l0VyE4jMnK4y1thV8lm8PYxI+7X5uWcppOK7zY79TCKKTAnJH3/4gaVIZHsjrmJA==", + "dependencies": [ + "lodash.clonedeep" + ] + } + }, + "workspace": { + "dependencies": [ + "npm:color@^5.0.3", + "npm:playwright@1.56.0", + "npm:user-agents@^1.1.669" + ] + } +} diff --git a/styles/google/scripts/flake.lock b/styles/google/scripts/flake.lock new file mode 100644 index 0000000000..6804789aab --- /dev/null +++ b/styles/google/scripts/flake.lock @@ -0,0 +1,24 @@ +{ + "nodes": { + "nixpkgs": { + "locked": { + "lastModified": 1767364772, + "narHash": "sha256-G6ie+qOCRSV7wzOY+6L1o8GvcH1qDcE/DTzDT4CRdNw=", + "rev": "16c7794d0a28b5a37904d55bcca36003b9109aaa", + "type": "tarball", + "url": "https://releases.nixos.org/nixpkgs/nixpkgs-26.05pre921317.16c7794d0a28/nixexprs.tar.xz" + }, + "original": { + "type": "tarball", + "url": "https://channels.nixos.org/nixpkgs-unstable/nixexprs.tar.xz" + } + }, + "root": { + "inputs": { + "nixpkgs": "nixpkgs" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/styles/google/scripts/flake.nix b/styles/google/scripts/flake.nix new file mode 100644 index 0000000000..16a78e1db1 --- /dev/null +++ b/styles/google/scripts/flake.nix @@ -0,0 +1,20 @@ +{ + description = "Catppuccin Google userstyle build scripts"; + + inputs.nixpkgs.url = "https://channels.nixos.org/nixpkgs-unstable/nixexprs.tar.xz"; + + outputs = + { nixpkgs, ... }: + let + forAllSystems = + function: + nixpkgs.lib.genAttrs nixpkgs.lib.systems.flakeExposed ( + system: function nixpkgs.legacyPackages.${system} + ); + in + { + devShells = forAllSystems (pkgs: { + default = pkgs.callPackage ./shell.nix { }; + }); + }; +} diff --git a/styles/google/scripts/gm3.d.ts b/styles/google/scripts/gm3.d.ts new file mode 100644 index 0000000000..7b53073db8 --- /dev/null +++ b/styles/google/scripts/gm3.d.ts @@ -0,0 +1,76 @@ +// based off 2025 spec +// https://github.com/material-foundation/material-color-utilities/blob/158b9c185a25c53fddd051cba811d542e6b94d68/typescript/dynamiccolor/color_spec.ts +export type M3Token2025Spec = 'background' | + 'onBackground' | + 'surface' | + 'surfaceDim' | + 'surfaceBright' | + 'surfaceContainerLowest' | + 'surfaceContainerLow' | + 'surfaceContainer' | + 'surfaceContainerHigh' | + 'surfaceContainerHighest' | + 'onSurface' | + 'surfaceVariant' | + 'onSurfaceVariant' | + 'inverseSurface' | + 'inverseOnSurface' | + 'outline' | + 'outlineVariant' | + 'shadow' | + 'scrim' | + 'surfaceTint' | + //////////////////////////////////////////////////////////////// + // Primaries [P] // + //////////////////////////////////////////////////////////////// + 'primary' | + 'primaryDim' | + 'onPrimary' | + 'primaryContainer' | + 'onPrimaryContainer' | + 'inversePrimary' | + //////////////////////////////////////////////////////////////// + // Secondaries [Q] // + //////////////////////////////////////////////////////////////// + 'secondary' | + 'secondaryDim' | + 'onSecondary' | + 'secondaryContainer' | + 'onSecondaryContainer' | + //////////////////////////////////////////////////////////////// + // Tertiaries [T] // + //////////////////////////////////////////////////////////////// + 'tertiary' | + 'tertiaryDim' | + 'onTertiary' | + 'tertiaryContainer' | + 'onTertiaryContainer' | + //////////////////////////////////////////////////////////////// + // Errors [E] // + //////////////////////////////////////////////////////////////// + 'error' | + 'errorDim' | + 'onError' | + 'errorContainer' | + 'onErrorContainer' | + //////////////////////////////////////////////////////////////// + // Primary Fixed Colors [PF] // + //////////////////////////////////////////////////////////////// + 'primaryFixed' | + 'primaryFixedDim' | + 'onPrimaryFixed' | + 'onPrimaryFixedVariant' | + //////////////////////////////////////////////////////////////// + // Secondary Fixed Colors [QF] // + //////////////////////////////////////////////////////////////// + 'secondaryFixed' | + 'secondaryFixedDim' | + 'onSecondaryFixed' | + 'onSecondaryFixedVariant' | + //////////////////////////////////////////////////////////////// + // Tertiary Fixed Colors [TF] // + //////////////////////////////////////////////////////////////// + 'tertiaryFixed' | + 'tertiaryFixedDim' | + 'onTertiaryFixed' | + 'onTertiaryFixedVariant'; diff --git a/styles/google/scripts/main.ts b/styles/google/scripts/main.ts new file mode 100644 index 0000000000..4715919c5a --- /dev/null +++ b/styles/google/scripts/main.ts @@ -0,0 +1,43 @@ +import { scrapeStylesheetsAndCombineForSites } from "@/scrape.ts"; + +const LTR_LOCALE = new Intl.Locale('en-US'); +const RTL_LOCALE = new Intl.Locale('ar-US'); + +const siteList = [ + // Default + 'https://www.google.com/webhp', + // Example search page + 'https://www.google.com/search?q=%22catppuccin%22', + // Images + 'https://www.google.com/imghp', + // Videos + 'https://www.google.com/videohp', + // AI Mode + 'https://www.google.com/search?&udm=50', + // Shopping + 'https://www.google.com/shopping?udm=28', + // Travel + 'https://www.google.com/travel', + // Advanced Search + 'https://www.google.com/advanced_search', + // Settings + 'https://www.google.com/preferences', +]; + +function getSitesToScrape(locale: Intl.Locale) { + const hl = `${locale.language}-${locale.region}`; + return siteList.map((site) => { + const url = new URL(site); + url.searchParams.set('hl', hl); + return url; + }) +}; + +async function buildUserstyle() { + const ltrUrls = getSitesToScrape(LTR_LOCALE) + const rtlUrls = getSitesToScrape(RTL_LOCALE) + + await scrapeStylesheetsAndCombineForSites(ltrUrls) +} + +buildUserstyle() diff --git a/styles/google/scripts/polyfills/legacy.css b/styles/google/scripts/polyfills/legacy.css new file mode 100644 index 0000000000..6d193e5a35 --- /dev/null +++ b/styles/google/scripts/polyfills/legacy.css @@ -0,0 +1,1115 @@ +/* TODO: clean this up */ + +html, +body { + color: var(--gm3-sys-color-on-surface); + background: var(--gm3-sys-color-surface); +} + +a:visited { + color: var(--gm3-sys-color-primary); +} + + +.appbar { + color: var(--gm3-sys-color-primary); +} + +div.bottom-links-wrapper { + background: var(--gm3-sys-color-surface); +} + +div.bottom-links a { + color: var(--gm3-sys-color-primary); +} + +.slmarker { + border-left: 1px solid var(--gm3-sys-color-outline); +} + +.goog-slider li { + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-slider:focus .goog-slider-thumb { + border: 1px solid var(--gm3-sys-color-primary); +} + + +.jfk-button-action { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); +} + +.jfk-button-action:hover { + background: var(--gm3-sys-color-primary); + box-shadow: 0 1px 2px var(--gm3-sys-color-shadow); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-on-primary); + border: 1px solid var(--gm3-sys-color-on-primary); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; + color: var(--gm3-sys-color-surface); +} + + +.jfk-button-contrast { + box-shadow: none; + background: var(--gm3-sys-color-surface); + color: var(--gm3-sys-color-on-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-contrast.jfk-button-hover, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-contrast.jfk-button-selected, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-selected, +.jfk-button-contrast.jfk-button-checked, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-contrast:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-contrast.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + + +.jfk-button-default { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); + text-shadow: none; +} + +.jfk-button-default.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-surface); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; +} + + +.jfk-button-flat { + border: 1px solid transparent; +} + +.jfk-button-flat:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + + +.jfk-button-mini { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); + text-shadow: none; +} + +.jfk-button-mini.jfk-button-hover, +.jfk-button-mini.jfk-button-clear-outline.jfk-button-hover { + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + text-shadow: none; +} + +.jfk-button-mini.jfk-button-checked, +.jfk-button-mini.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-mini:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-mini.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + + +.jfk-button-primary { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); + text-shadow: none; +} + +.jfk-button-primary.jfk-button-hover { + box-shadow: 0 1px 1px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-surface); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; +} + + +.jfk-slideToggle { + box-shadow: inset 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-slideToggle-on { + box-shadow: inset 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); +} + +.jfk-slideToggle-thumb { + box-shadow: 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-slideToggle-thumb::after { + background-image: linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%); +} + +.jfk-slideToggle:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-slideToggle.jfk-slideToggle-clearOutline { + border: 1px solid var(--gm3-sys-color-outline); +} + + +.jfk-button-standard { + box-shadow: none; + background: var(--gm3-sys-color-surface); + color: var(--gm3-sys-color-on-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-standard.jfk-button-hover, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-standard:active, +.jfk-button-standard.jfk-button-hover:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface-container-highest); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-standard.jfk-button-selected, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-selected, +.jfk-button-standard.jfk-button-checked, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-standard:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-standard.jfk-button-clear-outline { + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-standard.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + + +.jfk-palette-cell-hover { + border: 1px solid var(--gm3-sys-color-on-surface); +} + +.jfk-palette-cell-selected { + outline: 1px solid var(--gm3-sys-color-on-surface); +} + +.jfk-colorwell { + border: 1px solid var(--gm3-sys-color-outline); +} + + +.goog-menu { + box-shadow: 0 2px 4px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.goog-flat-menu-button { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.goog-flat-menu-button-disabled { + background: var(--gm3-sys-color-surface); + border-color: var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-flat-menu-button.goog-flat-menu-button-hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: 0 1px 1px var(--gm3-sys-color-shadow); + border-color: var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.goog-flat-menu-button.goog-flat-menu-button-focused { + border-color: var(--gm3-sys-color-primary); +} + +.goog-flat-menu-button.goog-flat-menu-button-open, +.goog-flat-menu-button.goog-flat-menu-button-active { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.goog-flat-menu-button-dropdown { + border-color: var(--gm3-sys-color-on-surface-variant) transparent; +} + +.goog-flat-menu-button-active .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-open .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-selected .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-hover .goog-flat-menu-button-dropdown { + border-color: var(--gm3-sys-color-on-surface) transparent; +} + + +.goog-menuitem, +.goog-tristatemenuitem, +.goog-filterobsmenuitem { + color: var(--gm3-sys-color-on-surface); +} + +.goog-menuitem-disabled { + cursor: default; +} + +.goog-menuitem-disabled .goog-menuitem-accel, +.goog-menuitem-disabled .goog-menuitem-content { + color: var(--gm3-sys-color-on-surface-variant) !important; +} + +.goog-menuitem-highlight, +.goog-menuitem-hover { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-surface-container-high); +} + +.goog-menuitem-highlight .goog-menuitem-content, +.goog-menuitem-hover .goog-menuitem-content { + color: var(--gm3-sys-color-on-surface); +} + +.goog-menuitem-accel { + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-menuitem-mnemonic-separator { + color: var(--gm3-sys-color-on-surface-variant); +} + + +.goog-slider-thumb { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.goog-slider-thumb:hover { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-outline); +} + +.goog-slider-horizontal .goog-slider-scale, +.goog-slider-vertical .goog-slider-scale { + border-color: var(--gm3-sys-color-outline); +} + + +.jfk-textinput { + border: 1px solid var(--gm3-sys-color-outline); + border-top: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-textinput:focus { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + border: 1px solid var(--gm3-sys-color-primary); +} + + +.jfk-radiobutton-radio { + background: transparent; + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-radiobutton:active .jfk-radiobutton-radio { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-outline); +} + +.jfk-radiobutton:hover .jfk-radiobutton-radio { + box-shadow: inset 0 1px 1px var(--gm3-sys-color-shadow); + border-color: var(--gm3-sys-color-outline); +} + +.jfk-radiobutton-checked .jfk-radiobutton-radio { + + background: transparent; +} + +.jfk-radiobutton-checked .jfk-radiobutton-radio::after { + background: var(--gm3-sys-color-primary); + border: 2px solid var(--gm3-sys-color-primary); +} + +.jfk-radiobutton-disabled .jfk-radiobutton-radio { + border-color: var(--gm3-sys-color-outline-variant); +} + +.jfk-radiobutton-disabled.jfk-radiobutton-checked .jfk-radiobutton-radio::after { + background: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-radiobutton-disabled .jfk-radiobutton-label { + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-radiobutton-disabled:active .jfk-radiobutton-radio, +.jfk-radiobutton-disabled:hover .jfk-radiobutton-radio { + background: var(--gm3-sys-color-surface); + border-color: var(--gm3-sys-color-outline-variant); +} + + +.jfk-scrollbar::-webkit-scrollbar-track { + border: solid transparent; +} + +.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:active { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb { + background: var(--gm3-sys-color-outline); + border: solid transparent; + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 1px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:active { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 3px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 1px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 3px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + + +html, +body { + color: var(--gm3-sys-color-on-surface); + background: var(--gm3-sys-color-surface); +} + +a:visited { + color: var(--gm3-sys-color-primary); +} + + +.appbar { + color: var(--gm3-sys-color-primary); +} + + +div.bottom-links-wrapper { + background: var(--gm3-sys-color-surface); +} + +div.bottom-links a { + color: var(--gm3-sys-color-primary); +} + + +.slmarker { + border-left: 1px solid var(--gm3-sys-color-outline); +} + +.goog-slider li { + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-slider:focus .goog-slider-thumb { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); +} + +.jfk-button-action:hover { + background: var(--gm3-sys-color-primary); + box-shadow: 0 1px 2px var(--gm3-sys-color-shadow); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-on-primary); + border: 1px solid var(--gm3-sys-color-on-primary); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-action.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; + color: var(--gm3-sys-color-surface); +} + + +.jfk-button-contrast { + box-shadow: none; + background: var(--gm3-sys-color-surface); + color: var(--gm3-sys-color-on-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-contrast.jfk-button-hover, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-contrast.jfk-button-selected, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-selected, +.jfk-button-contrast.jfk-button-checked, +.jfk-button-contrast.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-contrast:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-contrast.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + + +.jfk-button-default { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); + text-shadow: none; +} + +.jfk-button-default.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-surface); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-default.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; +} + +.jfk-button-flat { + border: 1px solid transparent; +} + +.jfk-button-flat:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-mini { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); + text-shadow: none; +} + +.jfk-button-mini.jfk-button-hover, +.jfk-button-mini.jfk-button-clear-outline.jfk-button-hover { + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + text-shadow: none; +} + +.jfk-button-mini.jfk-button-checked, +.jfk-button-mini.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-mini:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-mini.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-button-primary { + box-shadow: none; + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); + text-shadow: none; +} + +.jfk-button-primary.jfk-button-hover { + box-shadow: 0 1px 1px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary:focus { + box-shadow: inset 0 0 0 1px var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-surface); + outline: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-primary.jfk-button-disabled { + background: var(--gm3-sys-color-on-surface); + opacity: 0.12; +} + +.jfk-slideToggle { + box-shadow: inset 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-slideToggle-on { + box-shadow: inset 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-primary); + color: var(--gm3-sys-color-on-primary); +} + +.jfk-slideToggle-thumb { + box-shadow: 0 1px 2px 0 var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-slideToggle-thumb::after { + background-image: linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%), + linear-gradient(to right, var(--gm3-sys-color-outline) 50%, transparent 50%); +} + +.jfk-slideToggle:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-slideToggle.jfk-slideToggle-clearOutline { + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-standard { + box-shadow: none; + background: var(--gm3-sys-color-surface); + color: var(--gm3-sys-color-on-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-standard.jfk-button-hover, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-hover { + box-shadow: none; + background: var(--gm3-sys-color-surface-container-high); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-standard:active, +.jfk-button-standard.jfk-button-hover:active { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface-container-highest); + color: var(--gm3-sys-color-on-surface); +} + +.jfk-button-standard.jfk-button-selected, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-selected, +.jfk-button-standard.jfk-button-checked, +.jfk-button-standard.jfk-button-clear-outline.jfk-button-checked { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.jfk-button-standard:focus { + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-button-standard.jfk-button-clear-outline { + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-button-standard.jfk-button-disabled { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-palette-cell-hover { + border: 1px solid var(--gm3-sys-color-on-surface); +} + +.jfk-palette-cell-selected { + outline: 1px solid var(--gm3-sys-color-on-surface); +} + +.jfk-colorwell { + border: 1px solid var(--gm3-sys-color-outline); +} + +.goog-menu { + box-shadow: 0 2px 4px var(--gm3-sys-color-shadow); + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.goog-flat-menu-button { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.goog-flat-menu-button-disabled { + background: var(--gm3-sys-color-surface); + border-color: var(--gm3-sys-color-outline-variant); + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-flat-menu-button.goog-flat-menu-button-hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: 0 1px 1px var(--gm3-sys-color-shadow); + border-color: var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-surface); +} + +.goog-flat-menu-button.goog-flat-menu-button-focused { + border-color: var(--gm3-sys-color-primary); +} + +.goog-flat-menu-button.goog-flat-menu-button-open, +.goog-flat-menu-button.goog-flat-menu-button-active { + background: var(--gm3-sys-color-secondary-container); + border: 1px solid var(--gm3-sys-color-outline); + color: var(--gm3-sys-color-on-secondary-container); +} + +.goog-flat-menu-button-dropdown { + border-color: var(--gm3-sys-color-on-surface-variant) transparent; +} + +.goog-flat-menu-button-active .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-open .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-selected .goog-flat-menu-button-dropdown, +.goog-flat-menu-button-hover .goog-flat-menu-button-dropdown { + border-color: var(--gm3-sys-color-on-surface) transparent; +} + +.goog-menuitem, +.goog-tristatemenuitem, +.goog-filterobsmenuitem { + color: var(--gm3-sys-color-on-surface); +} + +.goog-menuitem-disabled { + cursor: default; +} + +.goog-menuitem-disabled .goog-menuitem-accel, +.goog-menuitem-disabled .goog-menuitem-content { + color: var(--gm3-sys-color-on-surface-variant) !important; +} + +.goog-menuitem-highlight, +.goog-menuitem-hover { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-surface-container-high); +} + +.goog-menuitem-highlight .goog-menuitem-content, +.goog-menuitem-hover .goog-menuitem-content { + color: var(--gm3-sys-color-on-surface); +} + +.goog-menuitem-accel { + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-menuitem-mnemonic-separator { + color: var(--gm3-sys-color-on-surface-variant); +} + +.goog-slider-thumb { + background: var(--gm3-sys-color-surface); + border: 1px solid var(--gm3-sys-color-outline); +} + +.goog-slider-thumb:hover { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-outline); +} + +.goog-slider-horizontal .goog-slider-scale, +.goog-slider-vertical .goog-slider-scale { + border-color: var(--gm3-sys-color-outline); +} + +.jfk-textinput { + border: 1px solid var(--gm3-sys-color-outline); + border-top: 1px solid var(--gm3-sys-color-outline); + background: transparent; +} + +.jfk-textinput:focus { + box-shadow: inset 0 1px 2px var(--gm3-sys-color-shadow); + border: 1px solid var(--gm3-sys-color-primary); +} + +.jfk-radiobutton-radio { + background: transparent; + border: 1px solid var(--gm3-sys-color-outline); +} + +.jfk-radiobutton:active .jfk-radiobutton-radio { + background: var(--gm3-sys-color-surface-container-high); + border-color: var(--gm3-sys-color-outline); +} + +.jfk-radiobutton:hover .jfk-radiobutton-radio { + box-shadow: inset 0 1px 1px var(--gm3-sys-color-shadow); + border-color: var(--gm3-sys-color-outline); +} + +.jfk-radiobutton-checked .jfk-radiobutton-radio { + background: transparent; +} + +.jfk-radiobutton-checked .jfk-radiobutton-radio::after { + background: var(--gm3-sys-color-primary); + border: 2px solid var(--gm3-sys-color-primary); +} + +.jfk-radiobutton-disabled .jfk-radiobutton-radio { + border-color: var(--gm3-sys-color-outline-variant); +} + +.jfk-radiobutton-disabled.jfk-radiobutton-checked .jfk-radiobutton-radio::after { + background: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-radiobutton-disabled .jfk-radiobutton-label { + color: var(--gm3-sys-color-on-surface-variant); +} + +.jfk-radiobutton-disabled:active .jfk-radiobutton-radio, +.jfk-radiobutton-disabled:hover .jfk-radiobutton-radio { + background: var(--gm3-sys-color-surface); + border-color: var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track { + border: solid transparent; +} + +.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:active { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb { + background: var(--gm3-sys-color-outline); + border: solid transparent; + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 1px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar::-webkit-scrollbar-thumb:active { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 3px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 1px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active { + background: var(--gm3-sys-color-outline); + box-shadow: inset 1px 1px 3px var(--gm3-sys-color-shadow); +} + +.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { + background: var(--gm3-sys-color-surface-container-high); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-track-piece { + background: var(--gm3-sys-color-surface); + border: solid var(--gm3-sys-color-surface); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-corner { + background: var(--gm3-sys-color-surface); + border: solid var(--gm3-sys-color-surface); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-track-piece { + background: var(--gm3-sys-color-surface); + border: solid var(--gm3-sys-color-surface); + box-shadow: inset 1px 0 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal { + box-shadow: inset 0 1px 0 var(--gm3-sys-color-outline-variant); +} + +body.jfk-scrollbar::-webkit-scrollbar-corner { + background: var(--gm3-sys-color-surface); + border: solid var(--gm3-sys-color-surface); + box-shadow: inset 1px 1px 0 var(--gm3-sys-color-outline-variant); +} \ No newline at end of file diff --git a/styles/google/scripts/process.ts b/styles/google/scripts/process.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/styles/google/scripts/scrape.ts b/styles/google/scripts/scrape.ts new file mode 100644 index 0000000000..ce679e6fa0 --- /dev/null +++ b/styles/google/scripts/scrape.ts @@ -0,0 +1,112 @@ +// Modified from https://github.com/WalkQuackBack/google-suite-color-theme/blob/main/scripts/dump-stylesheets.ts + +import { chromium, devices, type Page } from 'playwright'; +import { interceptRequest } from "./utils.ts"; + +import UserAgent from "user-agents"; + +// TODO: Define proper type for cssSources. + +// TODO: Fix typings +// deno-lint-ignore no-explicit-any +async function getSiteStyles(page: Page, url: URL): Promise<[string[], any]> { + await page.goto(url.href, { + timeout: 20000, + waitUntil: 'load' + }); + + await page.screenshot({ path: `screenshots/${url.pathname}-${url.search}.png` }); + + const cssSources = await page.evaluate(() => { + const styleTags = Array.from(document.querySelectorAll('style')).map(tag => { + const dataHref = tag.getAttribute('data-href'); + const absoluteHref = dataHref && new URL(dataHref, document.baseURI).href || ''; + return { + content: tag.textContent, + href: absoluteHref, + } + } + ); + + const linkTags = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(tag => { + const href = tag.getAttribute('href'); + if (!href) return ''; + const absoluteHref = new URL(href, document.baseURI).href; + return absoluteHref; + }); + + return { styleTags, linkTags }; + }); + + const stylesheetHrefs: (string)[] = [ + ...cssSources.linkTags, + ...cssSources.styleTags.filter(s => s.href).map(s => s.href) + ]; + + return [ stylesheetHrefs, cssSources ] +} + +export async function scrapeStylesheetsAndCombineForSites(urls: URL[]) { + const userAgent = new UserAgent({ + deviceCategory: 'desktop', + }).toString(); + + const browser = await chromium.launch(); + const context = await browser.newContext({ + userAgent: userAgent + }); + const page = await context.newPage(); + + await interceptRequest(page); + + let combinedCss = ''; + + console.log('\n') + + console.log('Extracting data from sites...'); + + let allHrefsToFetch: string[] = [] + + for (const url of urls) { + const siteStyles = await getSiteStyles(page, url); + allHrefsToFetch = allHrefsToFetch.concat(siteStyles[0]) + const cssSources = siteStyles[1] + + const inlineCss = cssSources.styleTags + .filter((s: { href: string; }) => !s.href) + .map((s: { content: string; }) => s.content) + .join('\n'); + + combinedCss += `${inlineCss}\n`; + console.log(`Combined inline styles from ${url}`); + } + + for (let i = 0; i < allHrefsToFetch.length; i++) { + const href = allHrefsToFetch[i]; + const hrefSplit = href.split('/') + if (hrefSplit.at(-1)?.startsWith('m=')) { + hrefSplit.pop() + } + allHrefsToFetch[i] = hrefSplit.join('/') + } + + allHrefsToFetch = allHrefsToFetch.filter((element, index) => { + return allHrefsToFetch.indexOf(element) === index; + }) + + console.log('Deduplicated fetch list:', allHrefsToFetch) + + console.log('Fetching stylesheets from sites...'); + const linkedCssPromises = allHrefsToFetch.map(href => + fetch(href).then(res => res.text()).catch(err => { + console.error(`Failed to fetch CSS from ${href}:`, err); + return ''; + }) + ); + + const linkedCss = (await Promise.all(linkedCssPromises)).join('\n'); + combinedCss += `${linkedCss}\n` + + console.log(`Successfully fetched stylesheets from ${urls}`); + return combinedCss +} diff --git a/styles/google/scripts/shell.nix b/styles/google/scripts/shell.nix new file mode 100644 index 0000000000..47adfc3309 --- /dev/null +++ b/styles/google/scripts/shell.nix @@ -0,0 +1,19 @@ +{ + deno, + mkShellNoCC, + playwright-driver, +}: +mkShellNoCC { + packages = [ + deno + ]; + nativeBuildInputs = [ + playwright-driver.browsers + ]; + + shellHook = '' + export PLAYWRIGHT_BROWSERS_PATH=${playwright-driver.browsers} + export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true + export PLAYWRIGHT_HOST_PLATFORM_OVERRIDE="ubuntu-24.04" + ''; +} diff --git a/styles/google/scripts/utils.ts b/styles/google/scripts/utils.ts new file mode 100644 index 0000000000..21da9d68ca --- /dev/null +++ b/styles/google/scripts/utils.ts @@ -0,0 +1,94 @@ +// deno-lint-ignore-file no-window +/** + * Code is derived from + * https://github.com/bytedance/UI-TARS-desktop/tree/main/packages/agent-infra/search/browser-search + * + * Copyright (c) 2025 Bytedance, Inc. and its affiliates. + * SPDX-License-Identifier: Apache-2.0 + */ + +import type { Page, Route } from "playwright"; + +/** + * Applies various stealth techniques to make the browser appear more like a regular user browser + * @param page - Puppeteer page object + */ +export async function applyStealthScripts(page: Page) { + // No need to bypass CSP, user agent + // await page.setBypassCSP(true); + // await page.setUserAgent( + // `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/237.84.2.178 Safari/537.36`, + // ); + + /** + * https://intoli.com/blog/not-possible-to-block-chrome-headless/chrome-headless-test.html + */ + await page.addInitScript(() => { + /** + * Override the navigator.webdriver property + * The webdriver read-only property of the navigator interface indicates whether the user agent is controlled by automation. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/webdriver + */ + Object.defineProperty(navigator, "webdriver", { + get: () => undefined, + }); + + // Mock languages and plugins to mimic a real browser + Object.defineProperty(navigator, "languages", { + get: () => ["en-US", "en"], + }); + + Object.defineProperty(navigator, "plugins", { + get: () => [{}, {}, {}, {}, {}], + }); + + // Redefine the headless property + Object.defineProperty(navigator, "headless", { + get: () => false, + }); + + // Override the permissions API + const originalQuery = window.navigator.permissions.query; + window.navigator.permissions.query = (parameters) => + parameters.name === "notifications" + ? Promise.resolve({ + state: Notification.permission, + } as PermissionStatus) + : originalQuery(parameters); + }); +} + +/** + * Sets up request interception to block unnecessary resources and apply stealth techniques + * @param page - Playwright page object + */ +export async function interceptRequest(page: Page) { + await applyStealthScripts(page); + + await page.route("**/*", (route: Route) => { + const request = route.request(); + // Why is this not upstream typed? + const resourceType = request.resourceType() as + | "document" + | "stylesheet" + | "image" + | "media" + | "font" + | "script" + | "texttrack" + | "xhr" + | "fetch" + | "eventsource" + | "websocket" + | "manifest" + | "other"; + + if ( + resourceType !== "document" && resourceType !== "stylesheet" && + resourceType !== "script" + ) { + return route.abort(); + } + return route.continue(); + }); +}