Skip to content

feat(simple-icons): init #2173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
scarcekoi wants to merge 24 commits into
base: main
Choose a base branch
from
Open

feat(simple-icons): init #2173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
0aad4a0
feat(simple-icons): init
scarcekoi Mar 14, 2026
4a86b65
feat(simple-icons): add css from upstream
scarcekoi Mar 14, 2026
749cfda
feat(simple-icons): theme
scarcekoi Mar 14, 2026
f8f11c5
fix(simple-icons): theme icons
scarcekoi Mar 14, 2026
0fb0f25
fix(simple-icons): correct text on latte
scarcekoi Mar 14, 2026
95bd4e9
chore: add port to userstyles.yml
scarcekoi Mar 14, 2026
443b414
fix(simple-icons): please the linter
scarcekoi Mar 14, 2026
18b12d0
fix(simple-icons): remove duplicate
scarcekoi Mar 14, 2026
c2ae7d1
feat(simple-icons): theme legal and brand icons
scarcekoi Mar 14, 2026
eeaf8dc
feat(simple-icons): add accent support
scarcekoi Mar 14, 2026
73b32fd
feat(simple-icons): theme more icons
scarcekoi Mar 14, 2026
95506fe
fix(simple-icons): remove :root
scarcekoi Mar 14, 2026
4ccf5a4
fix(simple-icons): remove stuff in the standard library
scarcekoi Mar 14, 2026
4b2fe41
fix(simple-icons): use nesting
scarcekoi Mar 14, 2026
4f5d2a9
fix(simple-icons): use nesting
scarcekoi Mar 14, 2026
b3b4636
feat(simple-icons): theme copy button
scarcekoi Mar 14, 2026
a4eaf71
feat(simple-icons): theme all copy buttons
scarcekoi Mar 15, 2026
e3dc5d2
Merge branch 'main' into feat/simple-icons
scarcekoi Mar 15, 2026
1f3c42a
feat(simple-icons): theme yellow sign
scarcekoi Mar 15, 2026
92c99e6
fix(simple-icons): please the linter
scarcekoi Mar 15, 2026
3ad328f
fix(simple-icons): use surface0 instead of overlay0 for borders
scarcekoi Mar 15, 2026
53c81c4
fix(simple-icons): use sky
scarcekoi Mar 17, 2026
8d7cadc
style(simple-icons): add comment
scarcekoi Apr 13, 2026
800afe7
Merge branch 'main' into feat/simple-icons
scarcekoi Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions scripts/userstyles.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ collaborators:
- &koibtw koibtw
- &TheAnonymousCrusher TheAnonymousCrusher
- &42willow 42willow
- &scarcekoi scarcekoi

userstyles:
advent-of-code:
Expand Down Expand Up @@ -866,6 +867,12 @@ userstyles:
categories: [browser_extension, social_networking]
color: mauve
current-maintainers: [*sofiedotcafe]
simple-icons:
name: Simple Icons
link: https://simpleicons.org
categories: [productivity]
color: text
current-maintainers: [*scarcekoi]
snapchat-web:
name: Snapchat Web
link: https://web.snapchat.com
Expand Down
318 changes: 318 additions & 0 deletions styles/simple-icons/catppuccin.user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,318 @@
/* ==UserStyle==
@name Simple Icons Catppuccin
@namespace github.com/catppuccin/userstyles/styles/simple-icons
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/simple-icons
@version 2000.01.01
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/simple-icons/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asimple-icons
@description Soothing pastel theme for Simple Icons
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@import "https://userstyles.catppuccin.com/lib/lib.less";

@-moz-document domain("simpleicons.org") {
body.dark {
#catppuccin(@darkFlavor);
}
body.light {
#catppuccin(@lightFlavor);
}

#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();

& when (@flavor = latte) {
--dark-contrast-color: @text;
--light-contrast-color: @base;
}
& when not (@flavor = latte) {
--dark-contrast-color: @base;
--light-contrast-color: @text;
}
--background-color:@base;
--text-default-color:@text;
--divider-color:@surface0;
--button-content-default-color:@text;
--button-content-hover-color:@base;
--button-content-selected-color:@base;
--button-background-selected-color:@accent;
--button-background-default-color:@base;
--button-background-hover-color:@accent;
--shadows-color:fade(@overlay0, 70.2%);
--transparent-element-background-color:fade(@base, 60%);
--link-color:@blue;
--link-color-hover: @sky;
--grid-item-background-color:@mantle;
--grid-item-transparent-background-color:fade(@mantle, 60%);

*,
::before,
::after {
border-color: @surface0;
}
.preview-input-group > input {
border-color: @surface0;

&.invalid {
border-color: @red;
}

&.warn {
border-color: fade(@yellow, 70.2%);
}
}
Comment thread
scarcekoi marked this conversation as resolved.
.preview-path-lint-errors {
background-color: @yellow;
color: @base;

li:not(:first-child) {
border-color: fade(@crust, 10.2%);
}

li > :last-child button {
background-color: @base;
color: @text;

&:hover {
background-color: @text;
color: @base;
}

&:focus {
background-color: @base;
color: @text;
}

&:hover:focus {
background-color: @text;
color: @base;
}
}
}
.x-button svg path {
fill: @text !important;

&:where(.dark, .dark *) {
fill: @text !important;
}
}
.x-button:hover svg path {
fill: @subtext0 !important;

&:where(.dark, .dark *) {
fill: @subtext0 !important;
}
}
.facebook-button svg path {
fill: @blue !important;
}
.facebook-button:hover svg path {
fill: @sky !important;
}
.mastodon-button svg path {
fill: @mauve !important;
}
.mastodon-button svg path:hover,
.mastodon-button:hover svg path {
fill: lighten(@mauve, 5%) !important;
}
.bluesky-button svg path {
fill: @blue !important;
}
.bluesky-button:hover svg path {
fill: @sky !important;
}
.modal-shadow {
background-color: fade(@crust, 70.2%);
}
.bg-\[\#333\] {
background-color: @base;
}
.bg-\[\#cbc407\] {
background-color: @yellow;
}
.bg-\[rgba\(0\,0\,0\,\.7\)\] {
background-color: fade(@crust, 70.2%);
}
.bg-slate-300 {
background-color: @subtext0;
}
.bg-transparent {
background-color: fade(@crust, 0%);
}
.border-\[rgb\(180\,0\,0\)\] {
border-color: @red;
}
.border-\[rgb\(64\,64\,64\)\] {
border-color: @surface0;
}
.border-\[rgba\(0\,0\,0\,\.1\)\] {
border-color: fade(@crust, 10.2%);
}
.border-\[rgba\(180\,150\,0\,\.7\)\] {
border-color: fade(@yellow, 70.2%);
}
.fill-\[\#000\] {
fill: @text;
}
.fill-\[\#0285FF\] {
fill: @blue;
}
.fill-\[\#0866FF\] {
fill: @blue;
}
.fill-\[\#2493fc\] {
fill: @sky;
}
.fill-\[\#333\] {
fill: @subtext0;
}
.fill-\[\#3b81f2\] {
fill: @sky;
}
.fill-\[\#6364FF\] {
fill: @mauve;
}
.fill-\[\#6c6cfc\] {
fill: lighten(@mauve, 5%);
}
.text-\[\#00e\] {
color: @blue;
}
.text-\[\#333\] {
color: @base;
}
.text-\[\#eee\] {
color: @text;
}
.visited\:text-\[\#551a8b\]:visited {
color: @mauve;
}
.hover\:bg-\[\#eee\]:hover {
background-color: @text;
}
.hover\:bg-slate-200:hover {
background-color: @subtext1;
}
.hover\:fill-\[\#6c6cfc\]:hover {
fill: lighten(@mauve, 5%);
}
.hover\:\!text-transparent:hover {
color: fade(@crust, 0%) !important;
}
.hover\:text-\[\#333\]:hover {
color: @base;
}
.hover\:text-\[\#3434ee\]:hover {
color: @sky;
}
.focus\:bg-\[\#333\]:focus {
background-color: @base;
}
.focus\:text-\[\#3434ee\]:focus {
color: @sky;
}
.focus\:text-\[\#eee\]:focus {
color: @text;
}
.focus\:hover\:bg-\[\#eee\]:hover:focus {
background-color: @text;
}
.focus\:hover\:text-\[\#333\]:hover:focus {
color: @base;
}
.dark\:bg-gray-700:where(.dark, .dark *) {
background-color: @surface0;
}
.dark\:fill-\[\#ccc\]:where(.dark, .dark *) {
fill: @text;
}
.dark\:fill-\[\#fff\]:where(.dark, .dark *) {
fill: @subtext0;
}
.dark\:text-\[\#227fff\]:where(.dark, .dark *) {
color: @blue;
}
.dark\:hover\:bg-slate-600:hover:where(.dark, .dark *) {
background-color: @surface1;
}
.dark\:hover\:text-\[\#3c8eff\]:hover:where(.dark, .dark *),
.dark\:focus\:text-\[\#3c8eff\]:focus:where(.dark, .dark *) {
color: @sky;
}
.dark\:visited\:text-\[\#a990bd\]:visited:where(.dark, .dark *) {
color: @lavender;
}
/* Icons */
main > ul > li > :first-child img {
filter: @text-filter;

&:where(.dark, .dark *) {
filter: @text-filter;
}
}
Comment thread
scarcekoi marked this conversation as resolved.
.icon-details-modal > :first-child > button > img {
filter: @text-filter;

&:where(.dark, .dark *) {
filter: @text-filter;
}
}
main > ul > li > .links > a.brand-guidelines {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="@{text}"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");

&:where(.dark, .dark *) {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="@{text}"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
main > ul > li > .links > a.license {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="@{text}"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5 5 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5 5 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");

&:where(.dark, .dark *) {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="@{text}"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5 5 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5 5 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
.icon-details-modal>:first-child>button::before {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");

&:where(.dark,.dark *) {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
.copy-button-black::before {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{base}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
.copy-button-white::before {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
main>ul>li>:first-child::before {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");

&:where(.dark,.dark *) {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{base}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
main>ul>li .deprecated>span {
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" version="1.0"><g transform="translate(-4.555 -3.769)scale(.15445)"><path fill="@{yellow}" stroke="@{base}" stroke-width="3.111" d="M31.952 79.01c-.416.801-.907 1.551-.907 2.431l.004.368c0 1.9 1.487 3.049 3.197 3.049h55.25c1.71 0 3.183-1.424 3.183-3.324l-.018-.37c0-.88-.433-1.644-.907-2.432L64.392 29.648c-1.21-1.343-3.17-1.343-4.378 0z"/><circle cx="23.921" cy="74.475" r="8.042" overflow="visible" style="marker:none" transform="translate(49.546 33.731)scale(.54212)"/><path d="M62.486 43.817c1.713 0 4.37 1.365 4.37 3.06l-1.278 17.615c0 1.695-1.38 3.06-3.092 3.06s-3.091-1.365-3.091-3.06l-1.493-17.615c0-1.695 2.871-3.06 4.584-3.06" overflow="visible" style="marker:none"/></g></svg>');
background-image: url("data:image/svg+xml,@{svg}");
}
}
Comment thread
scarcekoi marked this conversation as resolved.
}
Loading