mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Upgrade sass

Browse source
This commit is contained in:
Jamie Kyle 2024-11-15 15:09:31 -08:00 • committed by GitHub
parent e819bfe4eb
commit 8e3b8b92fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
165 changed files with 8663 additions and 6514 deletions
Download patch file Download diff file Expand all files Collapse all files

375
package-lock.json generated
View file

@ -230,7 +230,7 @@
"protobufjs-cli": "1.1.1", "protobufjs-cli": "1.1.1",
"resedit": "2.0.2", "resedit": "2.0.2",
"resolve-url-loader": "5.0.0", "resolve-url-loader": "5.0.0",
"sass": "1.49.7", "sass": "1.80.7",
"sass-loader": "16.0.3", "sass-loader": "16.0.3",
"sinon": "19.0.2", "sinon": "19.0.2",
"storybook": "8.4.3", "storybook": "8.4.3",
@ -3857,6 +3857,324 @@
"@octokit/openapi-types": "^12.11.0" "@octokit/openapi-types": "^12.11.0"
} }
}, },
"node_modules/@parcel/watcher": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
"integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^1.0.3",
"is-glob": "^4.0.3",
"micromatch": "^4.0.5",
"node-addon-api": "^7.0.0"
},
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"@parcel/watcher-android-arm64": "2.5.0",
"@parcel/watcher-darwin-arm64": "2.5.0",
"@parcel/watcher-darwin-x64": "2.5.0",
"@parcel/watcher-freebsd-x64": "2.5.0",
"@parcel/watcher-linux-arm-glibc": "2.5.0",
"@parcel/watcher-linux-arm-musl": "2.5.0",
"@parcel/watcher-linux-arm64-glibc": "2.5.0",
"@parcel/watcher-linux-arm64-musl": "2.5.0",
"@parcel/watcher-linux-x64-glibc": "2.5.0",
"@parcel/watcher-linux-x64-musl": "2.5.0",
"@parcel/watcher-win32-arm64": "2.5.0",
"@parcel/watcher-win32-ia32": "2.5.0",
"@parcel/watcher-win32-x64": "2.5.0"
}
},
"node_modules/@parcel/watcher-android-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
"integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
"integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
"integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-freebsd-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
"integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
"integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
"integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
"integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
"integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
"integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
"integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
"integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-ia32": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
"integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
"integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher/node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"dev": true,
"license": "MIT",
"optional": true
},
"node_modules/@pkgjs/parseargs": { "node_modules/@pkgjs/parseargs": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -19111,10 +19429,11 @@
} }
}, },
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.0.0", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", "integrity": "sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==",
"dev": true "dev": true,
"license": "MIT"
}, },
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
@ -27854,20 +28173,24 @@
"integrity": "sha512-Ox0X2lk0kOGeODJgT9S9HFv0j5Cz89ir9ILylj62/vejHPdMmahmetfocoQwyiAnseeXyDa+KIbO6ZQJe5n2Lg==" "integrity": "sha512-Ox0X2lk0kOGeODJgT9S9HFv0j5Cz89ir9ILylj62/vejHPdMmahmetfocoQwyiAnseeXyDa+KIbO6ZQJe5n2Lg=="
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.49.7", "version": "1.80.7",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.7.tgz",
"integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", "integrity": "sha512-MVWvN0u5meytrSjsU7AWsbhoXi1sc58zADXFllfZzbsBT1GHjjar6JwBINYPRrkx/zqnQ6uqbQuHgE95O+C+eQ==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": "^4.0.0",
"immutable": "^4.0.0", "immutable": "^5.0.2",
"source-map-js": ">=0.6.2 <2.0.0" "source-map-js": ">=0.6.2 <2.0.0"
}, },
"bin": { "bin": {
"sass": "sass.js" "sass": "sass.js"
}, },
"engines": { "engines": {
"node": ">=12.0.0" "node": ">=14.0.0"
},
"optionalDependencies": {
"@parcel/watcher": "^2.4.1"
} }
}, },
"node_modules/sass-loader": { "node_modules/sass-loader": {
@ -27911,6 +28234,36 @@
} }
} }
}, },
"node_modules/sass/node_modules/chokidar": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
"dev": true,
"license": "MIT",
"dependencies": {
"readdirp": "^4.0.1"
},
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sass/node_modules/readdirp": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sax": { "node_modules/sax": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",

2
package.json
View file

@ -314,7 +314,7 @@
"protobufjs-cli": "1.1.1", "protobufjs-cli": "1.1.1",
"resedit": "2.0.2", "resedit": "2.0.2",
"resolve-url-loader": "5.0.0", "resolve-url-loader": "5.0.0",
"sass": "1.49.7", "sass": "1.80.7",
"sass-loader": "16.0.3", "sass-loader": "16.0.3",
"sinon": "19.0.2", "sinon": "19.0.2",
"storybook": "8.4.3", "storybook": "8.4.3",

2
sticker-creator/src/mixins.scss
View file

@ -2,7 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@mixin light-theme() { @mixin light-theme() {
& {
@content; @content;
}
} }
@mixin dark-theme() { @mixin dark-theme() {

215
stylesheets/_global.scss
View file

@ -1,6 +1,9 @@
// Copyright 2015 Signal Messenger, LLC // Copyright 2015 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'mixins';
@use 'variables';
html { html {
height: 100%; height: 100%;
cursor: inherit; cursor: inherit;
@ -16,18 +19,18 @@ body {
width: 100%; width: 100%;
margin: 0; margin: 0;
color: $color-gray-90; color: variables.$color-gray-90;
@include font-family; @include mixins.font-family;
@include font-body-1; @include mixins.font-body-1;
&.light-theme { &.light-theme {
background-color: $color-white; background-color: variables.$color-white;
color: $color-gray-90; color: variables.$color-gray-90;
} }
&.dark-theme { &.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
color: $color-gray-05; color: variables.$color-gray-05;
} }
&.is-resizing-left-pane { &.is-resizing-left-pane {
@ -87,31 +90,31 @@ textarea {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 4px; border-radius: 4px;
@include light-theme { @include mixins.light-theme {
background: $color-gray-25; background: variables.$color-gray-25;
border: 2px solid $color-white; border: 2px solid variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-45; background: variables.$color-gray-45;
border: 2px solid $color-gray-90; border: 2px solid variables.$color-gray-90;
} }
&:hover { &:hover {
@include light-theme { @include mixins.light-theme {
background: $color-gray-45; background: variables.$color-gray-45;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-25; background: variables.$color-gray-25;
} }
} }
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
@include light-theme { @include mixins.light-theme {
background: $color-white; background: variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-black; background: variables.$color-black;
} }
} }
@ -126,13 +129,13 @@ audio {
bottom: 0; bottom: 0;
opacity: 0.25; opacity: 0.25;
z-index: $z-index-popup-overlay; z-index: variables.$z-index-popup-overlay;
@include light-theme { @include mixins.light-theme {
background-color: $color-black; background-color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
} }
@ -156,31 +159,31 @@ button {
} }
button.grey { button.grey {
border-radius: 5px; border-radius: 5px;
border: solid 1px $color-gray-25; border: solid 1px variables.$color-gray-25;
cursor: pointer; cursor: pointer;
margin-block: 1em; margin-block: 1em;
margin-inline: auto; margin-inline: auto;
padding: 1em; padding: 1em;
font-family: inherit; font-family: inherit;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
background: $color-gray-02; background: variables.$color-gray-02;
box-shadow: 0 0 10px -5px $color-black-alpha-40; box-shadow: 0 0 10px -5px variables.$color-black-alpha-40;
} }
@include dark-theme { @include mixins.dark-theme {
border: solid 1px $color-gray-25; border: solid 1px variables.$color-gray-25;
color: $color-gray-60; color: variables.$color-gray-60;
background: $color-gray-02; background: variables.$color-gray-02;
box-shadow: 0 0 10px -5px $color-white-alpha-60; box-shadow: 0 0 10px -5px variables.$color-white-alpha-60;
} }
&:hover { &:hover {
@include light-theme { @include mixins.light-theme {
box-shadow: 0 0 10px -3px $color-black-alpha-60; box-shadow: 0 0 10px -3px variables.$color-black-alpha-60;
} }
@include dark-theme { @include mixins.dark-theme {
box-shadow: 0 0 10px -3px $color-white-alpha-80; box-shadow: 0 0 10px -3px variables.$color-white-alpha-80;
} }
} }
@ -195,12 +198,12 @@ button.grey {
} }
a { a {
@include light-theme { @include mixins.light-theme {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
@ -219,8 +222,8 @@ $loading-height: 16px;
animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
border: solid 3px; border: solid 3px;
border-color: $color-ios-blue-tint $color-ios-blue-tint $color-gray-02 border-color: variables.$color-ios-blue-tint variables.$color-ios-blue-tint
$color-gray-02 !important; variables.$color-gray-02 variables.$color-gray-02 !important;
} }
} }
@ -232,14 +235,17 @@ $loading-height: 16px;
width: 22px; width: 22px;
height: 22px; height: 22px;
padding: 3px; padding: 3px;
background: $color-gray-60; background: variables.$color-gray-60;
&:before { &:before {
content: ''; content: '';
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include color-svg('../images/icons/v3/x/x.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-white
);
} }
} }
@ -268,7 +274,7 @@ $loading-height: 16px;
} }
.app-loading-screen { .app-loading-screen {
z-index: $z-index-on-top-of-everything; z-index: variables.$z-index-on-top-of-everything;
position: absolute; position: absolute;
inset-inline: 0; inset-inline: 0;
top: 0; top: 0;
@ -279,13 +285,13 @@ $loading-height: 16px;
/* Note: background-color is intentionally transparent until body has the /* Note: background-color is intentionally transparent until body has the
* theme class. * theme class.
*/ */
@include explicit-light-theme { @include mixins.explicit-light-theme {
background-color: $color-white; background-color: variables.$color-white;
color: $color-black-alpha-80; color: variables.$color-black-alpha-80;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
color: $color-white-alpha-80; color: variables.$color-white-alpha-80;
} }
display: flex; display: flex;
@ -309,14 +315,16 @@ $loading-height: 16px;
margin-block: 0; margin-block: 0;
margin-inline: 6px; margin-inline: 6px;
transform: scale(0); transform: scale(0);
@include light-theme { @include mixins.light-theme {
border-color: $color-black; border-color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-white; border-color: variables.$color-white;
} }
& {
animation: loading 1500ms ease infinite 0ms; animation: loading 1500ms ease infinite 0ms;
}
&:nth-child(2) { &:nth-child(2) {
animation: loading 1500ms ease infinite 333ms; animation: loading 1500ms ease infinite 333ms;
} }
@ -336,11 +344,11 @@ $loading-height: 16px;
width: 100%; width: 100%;
margin-block: 12px 26px; margin-block: 12px 26px;
margin-inline: 0; margin-inline: 0;
@include light-theme { @include mixins.light-theme {
background: $color-black-alpha-20; background: variables.$color-black-alpha-20;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-white-alpha-20; background: variables.$color-white-alpha-20;
} }
} }
@ -359,11 +367,11 @@ $loading-height: 16px;
} }
transition: transform 500ms linear; transition: transform 500ms linear;
@include light-theme { @include mixins.light-theme {
background: $color-black; background: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-white; background: variables.$color-white;
} }
} }
} }
@ -383,12 +391,12 @@ $loading-height: 16px;
bottom: 0; bottom: 0;
&.overlay { &.overlay {
z-index: $z-index-popup-overlay; z-index: variables.$z-index-popup-overlay;
} }
color: $color-black; color: variables.$color-black;
a { a {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
@ -407,7 +415,7 @@ $loading-height: 16px;
input { input {
margin-top: 1em; margin-top: 1em;
font-size: 12pt; font-size: 12pt;
border: 2px solid $color-ultramarine; border: 2px solid variables.$color-ultramarine;
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
width: 20em; width: 20em;
@ -491,54 +499,57 @@ $loading-height: 16px;
// generic // generic
&.check-circle-outline { &.check-circle-outline {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/check-circle-outline.svg', '../images/full-screen-flow/check-circle-outline.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
&.alert-outline { &.alert-outline {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg', '../images/full-screen-flow/alert-outline.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
// import and export // import and export
&.folder-outline { &.folder-outline {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/folder-outline.svg', '../images/full-screen-flow/folder-outline.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
&.import { &.import {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/import.svg', '../images/full-screen-flow/import.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
// registration process // registration process
&.lead-pencil { &.lead-pencil {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/lead-pencil.svg', '../images/full-screen-flow/lead-pencil.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
&.sync { &.sync {
@include color-svg('../images/full-screen-flow/sync.svg', $color-gray-15); @include mixins.color-svg(
'../images/full-screen-flow/sync.svg',
variables.$color-gray-15
);
} }
// delete // delete
&.alert-outline-red { &.alert-outline-red {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg', '../images/full-screen-flow/alert-outline.svg',
$color-accent-red variables.$color-accent-red
); );
} }
&.delete { &.delete {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/delete.svg', '../images/full-screen-flow/delete.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
@ -551,18 +562,18 @@ $loading-height: 16px;
padding: 0.75em; padding: 0.75em;
margin-top: 1em; margin-top: 1em;
margin-inline: 0.5em; margin-inline: 0.5em;
color: $color-white; color: variables.$color-white;
background: $color-ultramarine; background: variables.$color-ultramarine;
box-shadow: 2px 2px 4px $color-black-alpha-40; box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
font-size: 12pt; font-size: 12pt;
&.neutral { &.neutral {
color: $color-black; color: variables.$color-black;
background: $color-gray-15; background: variables.$color-gray-15;
} }
&.destructive { &.destructive {
background: $color-accent-red; background: variables.$color-accent-red;
} }
@media (min-height: 750px) and (min-width: 700px) { @media (min-height: 750px) and (min-width: 700px) {
@ -570,23 +581,25 @@ $loading-height: 16px;
} }
&:disabled { &:disabled {
background-color: $color-gray-20; background-color: variables.$color-gray-20;
cursor: auto; cursor: auto;
} }
} }
button.link { button.link {
@include button-reset; @include mixins.button-reset;
& {
display: block; display: block;
margin-block: 0.5em; margin-block: 0.5em;
margin-inline: auto; margin-inline: auto;
text-align: center; text-align: center;
text-decoration: underline; text-decoration: underline;
color: $color-ultramarine; color: variables.$color-ultramarine;
}
&:disabled { &:disabled {
color: $color-gray-20; color: variables.$color-gray-20;
cursor: auto; cursor: auto;
} }
} }
@ -596,7 +609,7 @@ $loading-height: 16px;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
margin: 0.5em; margin: 0.5em;
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
.progress { .progress {
@ -608,14 +621,14 @@ $loading-height: 16px;
.bar-container { .bar-container {
height: 1em; height: 1em;
margin: 1em; margin: 1em;
background-color: $color-gray-02; background-color: variables.$color-gray-02;
} }
.bar { .bar {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $color-ios-blue-tint; background-color: variables.$color-ios-blue-tint;
transition: width 0.25s; transition: width 0.25s;
box-shadow: 2px 2px 4px $color-black-alpha-40; box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
} }
} }
@ -651,7 +664,7 @@ $loading-height: 16px;
} }
.StandaloneRegistration__error { .StandaloneRegistration__error {
color: $color-accent-red; color: variables.$color-accent-red;
} }
} }

417
stylesheets/_mixins.scss
View file

@ -1,6 +1,11 @@
// Copyright 2016 Signal Messenger, LLC // Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use 'sass:map';
@use 'sass:string';
@use 'variables';
// Fonts // Fonts
@mixin localized-fonts { @mixin localized-fonts {
@ -32,12 +37,12 @@
} }
@mixin font-family { @mixin font-family {
font-family: $inter; font-family: variables.$inter;
@include localized-fonts; @include localized-fonts;
} }
@mixin time-fonts { @mixin time-fonts {
font-family: Hatsuishi, $inter; font-family: Hatsuishi, variables.$inter;
@include localized-fonts; @include localized-fonts;
} }
@ -111,7 +116,9 @@
} }
@mixin font-subtitle-bold { @mixin font-subtitle-bold {
@include font-subtitle; @include font-subtitle;
& {
font-weight: 600; font-weight: 600;
}
} }
@mixin font-caption { @mixin font-caption {
@ -132,7 +139,9 @@
// Themes // Themes
@mixin light-theme() { @mixin light-theme() {
& {
@content; @content;
}
} }
@mixin explicit-light-theme() { @mixin explicit-light-theme() {
@ -187,10 +196,10 @@
} }
@include light-theme { @include light-theme {
background: $color-gray-05; background: variables.$color-gray-05;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-65; background: variables.$color-gray-65;
} }
} }
@ -216,13 +225,13 @@
// Icons // Icons
@function str-replace($string, $search, $replace: '') { @function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search); $index: string.index($string, $search);
@if $index { @if $index {
@return ( @return (
str-slice($string, 1, $index - 1) + $replace + string.slice($string, 1, $index - 1) + $replace +
str-replace( str-replace(
str-slice($string, $index + str-length($search)), string.slice($string, $index + string.length($search)),
$search, $search,
$replace $replace
) )
@ -263,20 +272,21 @@ $rtl-icon-map: (
@function get-rtl-svg($svg) { @function get-rtl-svg($svg) {
@each $ltr, $rtl in $rtl-icon-map { @each $ltr, $rtl in $rtl-icon-map {
@if str-index($svg, $ltr) { @if string.index($svg, $ltr) {
@if $rtl == '' { @if $rtl == '' {
@return $ltr; @return $ltr;
} }
@return str-replace($svg, $ltr, $rtl); @return str-replace($svg, $ltr, $rtl);
} }
} }
@if str-index($svg, 'left') or str-index($svg, 'right') { @if string.index($svg, 'left') or string.index($svg, 'right') {
@error "Missing RTL icon for #{$svg}"; @error "Missing RTL icon for #{$svg}";
} }
@return false; @return false;
} }
@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) { @mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
& {
-webkit-mask: url($svg) no-repeat center; -webkit-mask: url($svg) no-repeat center;
@if $stretch { @if $stretch {
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
@ -285,6 +295,7 @@ $rtl-icon-map: (
-webkit-mask-origin: $mask-origin; -webkit-mask-origin: $mask-origin;
} }
background-color: $color; background-color: $color;
}
@media (forced-colors: active) { @media (forced-colors: active) {
background-color: WindowText; background-color: WindowText;
} }
@ -325,9 +336,11 @@ $rtl-icon-map: (
// Other // Other
@mixin popper-shadow() { @mixin popper-shadow() {
& {
box-shadow: box-shadow:
0px 8px 20px rgba(0, 0, 0, 0.3), 0px 8px 20px rgba(0, 0, 0, 0.3),
0px 0px 8px rgba(0, 0, 0, 0.05); 0px 0px 8px rgba(0, 0, 0, 0.05);
}
@media (forced-colors: active) { @media (forced-colors: active) {
border: 1px solid WindowText; border: 1px solid WindowText;
@ -335,6 +348,7 @@ $rtl-icon-map: (
} }
@mixin button-reset { @mixin button-reset {
& {
background: none; background: none;
color: inherit; color: inherit;
border: none; border: none;
@ -344,6 +358,7 @@ $rtl-icon-map: (
cursor: pointer; cursor: pointer;
outline: inherit; outline: inherit;
text-align: inherit; text-align: inherit;
}
@media (forced-colors: active) { @media (forced-colors: active) {
border: 1px solid WindowText; border: 1px solid WindowText;
@ -353,16 +368,18 @@ $rtl-icon-map: (
@mixin staged-attachment-close-button { @mixin staged-attachment-close-button {
@include button-reset; @include button-reset;
& {
position: absolute; position: absolute;
top: 4px; top: 4px;
inset-inline-end: 4px; inset-inline-end: 4px;
width: 16px; width: 16px;
height: 16px; height: 16px;
z-index: $z-index-above-base; z-index: variables.$z-index-above-base;
}
} }
@mixin calling-text-shadow { @mixin calling-text-shadow {
text-shadow: 0 0 4px $color-black-alpha-40; text-shadow: 0 0 4px variables.$color-black-alpha-40;
} }
@mixin lonely-local-video-preview { @mixin lonely-local-video-preview {
@ -380,45 +397,53 @@ $rtl-icon-map: (
@mixin button-focus-outline { @mixin button-focus-outline {
&:focus { &:focus {
@include keyboard-mode { @include keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine; box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine-light; box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
} }
} }
} }
@mixin button-blue-text { @mixin button-blue-text {
@include light-theme { @include light-theme {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
@include dark-theme { @include dark-theme {
color: $color-ultramarine-light; color: variables.$color-ultramarine-light;
} }
} }
// Complete button styles // Complete button styles
@mixin button-primary { @mixin button-primary {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
// Note: the background colors here need to match the parent component // Note: the background colors here need to match the parent component
@include light-theme { @include light-theme {
color: $color-white; color: variables.$color-white;
border: 1px solid white; border: 1px solid white;
} }
@include dark-theme { @include dark-theme {
color: $color-white-alpha-90; color: variables.$color-white-alpha-90;
border: 1px solid $color-gray-95; border: 1px solid variables.$color-gray-95;
} }
&:hover { &:hover {
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-ultramarine, 15%); background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
15%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-ultramarine, 15%); background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
15%
);
} }
} }
@ -426,17 +451,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence // We need to include all four here for specificity precedence
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-ultramarine, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-ultramarine, 25%); background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
25%
);
} }
@include keyboard-mode { @include keyboard-mode {
background-color: mix($color-black, $color-ultramarine, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: mix($color-black, $color-ultramarine, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
} }
} }
@ -445,21 +486,29 @@ $rtl-icon-map: (
@mixin button-secondary { @mixin button-secondary {
@include light-theme { @include light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
@include dark-theme { @include dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
&:hover { &:hover {
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-gray-05, 15%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
15%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-gray-65, 15%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
15%
);
} }
} }
@ -467,17 +516,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence // We need to include all four here for specificity precedence
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-gray-05, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-gray-65, 25%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
} }
@include keyboard-mode { @include keyboard-mode {
background-color: mix($color-black, $color-gray-05, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-65, 25%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
} }
} }
@ -491,21 +556,29 @@ $rtl-icon-map: (
@mixin button-light { @mixin button-light {
@include light-theme { @include light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
background-color: $color-gray-02; background-color: variables.$color-gray-02;
} }
@include dark-theme { @include dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
background-color: $color-gray-75; background-color: variables.$color-gray-75;
} }
&:hover { &:hover {
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-gray-02, 10%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
10%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 10%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
10%
);
} }
} }
@ -513,17 +586,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence // We need to include all four here for specificity precedence
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-gray-02, 20%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 20%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
} }
@include keyboard-mode { @include keyboard-mode {
background-color: mix($color-black, $color-gray-02, 20%); background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-75, 20%); background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
} }
} }
@ -537,21 +626,29 @@ $rtl-icon-map: (
@mixin button-destructive { @mixin button-destructive {
@include light-theme { @include light-theme {
color: $color-white; color: variables.$color-white;
background-color: $color-accent-red; background-color: variables.$color-accent-red;
} }
@include dark-theme { @include dark-theme {
color: $color-white-alpha-90; color: variables.$color-white-alpha-90;
background-color: $color-accent-red; background-color: variables.$color-accent-red;
} }
&:hover { &:hover {
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-accent-red, 15%); background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
15%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-accent-red, 15%); background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
15%
);
} }
} }
@ -559,17 +656,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence // We need to include all four here for specificity precedence
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $color-accent-red, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $color-accent-red, 25%); background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
} }
@include keyboard-mode { @include keyboard-mode {
background-color: mix($color-black, $color-accent-red, 25%); background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: mix($color-white, $color-accent-red, 25%); background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
} }
} }
@ -577,26 +690,42 @@ $rtl-icon-map: (
} }
@mixin button-green { @mixin button-green {
$background-color: $color-accent-green; $background-color: variables.$color-accent-green;
background-color: $background-color; background-color: $background-color;
color: $color-white; color: variables.$color-white;
&:active { &:active {
// We need to include all four here for specificity precedence // We need to include all four here for specificity precedence
@include mouse-mode { @include mouse-mode {
background-color: mix($color-black, $background-color, 25%); background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
} }
@include dark-mouse-mode { @include dark-mouse-mode {
background-color: mix($color-white, $background-color, 25%); background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
} }
@include keyboard-mode { @include keyboard-mode {
background-color: mix($color-black, $background-color, 25%); background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: mix($color-white, $background-color, 25%); background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
} }
} }
@ -617,6 +746,8 @@ $rtl-icon-map: (
@mixin modal-reset { @mixin modal-reset {
@include popper-shadow(); @include popper-shadow();
& {
border-radius: 8px; border-radius: 8px;
margin-block: 0; margin-block: 0;
margin-inline: auto; margin-inline: auto;
@ -627,42 +758,45 @@ $rtl-icon-map: (
width: 95%; width: 95%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
@include light-theme() { @include light-theme() {
background: $color-white; background: variables.$color-white;
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme() { @include dark-theme() {
background: $color-gray-95; background: variables.$color-gray-95;
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
@mixin modal-close-button { @mixin modal-close-button {
@include button-reset; @include button-reset;
& {
position: absolute; position: absolute;
inset-inline-end: 12px; inset-inline-end: 12px;
top: 12px; top: 12px;
height: 24px; height: 24px;
width: 24px; width: 24px;
}
@include light-theme { @include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75); @include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-75);
} }
@include dark-theme { @include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15); @include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-15);
} }
&:focus { &:focus {
@include keyboard-mode { @include keyboard-mode {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
background-color: $color-ultramarine-light; background-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -678,27 +812,27 @@ $rtl-icon-map: (
padding: 2px; padding: 2px;
width: $bubble-size; width: $bubble-size;
@each $color, $value in $conversation-colors { @each $color, $value in variables.$conversation-colors {
&--#{$color} { &--#{$color} {
background-color: $value; background-color: $value;
} }
} }
@each $color, $value in $conversation-colors-gradient { @each $color, $value in variables.$conversation-colors-gradient {
&--#{$color} { &--#{$color} {
background-image: linear-gradient( background-image: linear-gradient(
map-get($value, 'deg'), map.get($value, 'deg'),
map-get($value, 'start'), map.get($value, 'start'),
map-get($value, 'end') map.get($value, 'end')
); );
} }
} }
} }
@mixin avatar-colors { @mixin avatar-colors {
@each $color, $value in $avatar-colors { @each $color, $value in variables.$avatar-colors {
&--#{$color} { &--#{$color} {
--bg: #{map-get($value, 'bg')}; --bg: #{map.get($value, 'bg')};
--fg: #{map-get($value, 'fg')}; --fg: #{map.get($value, 'fg')};
background-color: var(--bg); background-color: var(--bg);
color: var(--fg); color: var(--fg);
@ -721,10 +855,10 @@ $rtl-icon-map: (
width: 6px; width: 6px;
@include light-theme { @include light-theme {
background: $color-black-alpha-40; background: variables.$color-black-alpha-40;
} }
@include dark-theme { @include dark-theme {
background: $color-white-alpha-40; background: variables.$color-white-alpha-40;
} }
} }
@ -751,26 +885,26 @@ $rtl-icon-map: (
width: 100%; width: 100%;
@include light-theme { @include light-theme {
background: $color-white; background: variables.$color-white;
color: $color-black; color: variables.$color-black;
border-color: $color-gray-15; border-color: variables.$color-gray-15;
&:disabled { &:disabled {
background: $color-gray-02; background: variables.$color-gray-02;
border-color: $color-gray-05; border-color: variables.$color-gray-05;
color: $color-gray-90; color: variables.$color-gray-90;
} }
} }
@include dark-theme { @include dark-theme {
background: $color-gray-80; background: variables.$color-gray-80;
color: $color-gray-05; color: variables.$color-gray-05;
border-color: $color-gray-45; border-color: variables.$color-gray-45;
&:disabled { &:disabled {
background: $color-gray-95; background: variables.$color-gray-95;
border-color: $color-gray-60; border-color: variables.$color-gray-60;
color: $color-gray-20; color: variables.$color-gray-20;
} }
} }
@ -778,10 +912,10 @@ $rtl-icon-map: (
outline: none; outline: none;
@include light-theme { @include light-theme {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
} }
@include dark-theme { @include dark-theme {
border-color: $color-ultramarine-light; border-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -796,13 +930,13 @@ $rtl-icon-map: (
user-select: none; user-select: none;
@include light-theme { @include light-theme {
background: $color-gray-02; background: variables.$color-gray-02;
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-95; background: variables.$color-gray-95;
color: $color-white; color: variables.$color-white;
} }
h1 { h1 {
@ -817,13 +951,13 @@ $rtl-icon-map: (
@mixin timeline-floating-header-node { @mixin timeline-floating-header-node {
@include rounded-corners; @include rounded-corners;
box-shadow: 0 1px 4px $color-black-alpha-20; box-shadow: 0 1px 4px variables.$color-black-alpha-20;
@include light-theme { @include light-theme {
background: $color-white; background: variables.$color-white;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-80; background: variables.$color-gray-80;
} }
} }
@ -879,12 +1013,12 @@ $rtl-icon-map: (
@include scrollbar; @include scrollbar;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@include light-theme { @include light-theme {
background: $color-gray-25; background: variables.$color-gray-25;
border-color: $color-gray-04; border-color: variables.$color-gray-04;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-45; background: variables.$color-gray-45;
border-color: $color-gray-80; border-color: variables.$color-gray-80;
} }
} }
} }
@ -901,23 +1035,25 @@ $rtl-icon-map: (
@include font-body-2; @include font-body-2;
@include light-theme { @include light-theme {
background-color: $color-gray-04; background-color: variables.$color-gray-04;
color: $color-black; color: variables.$color-black;
outline: 1px solid $color-gray-20; outline: 1px solid variables.$color-gray-20;
} }
@include dark-theme { @include dark-theme {
background-color: $color-gray-80; background-color: variables.$color-gray-80;
color: $color-gray-15; color: variables.$color-gray-15;
outline: 1px solid $color-gray-62; outline: 1px solid variables.$color-gray-62;
} }
& {
padding-block: 5px; padding-block: 5px;
padding-inline: 12px; padding-inline: 12px;
border-radius: 6px; border-radius: 6px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-16); filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-16);
pointer-events: none; pointer-events: none;
} }
}
& .module-tooltip-arrow::before { & .module-tooltip-arrow::before {
position: absolute; position: absolute;
@ -928,55 +1064,59 @@ $rtl-icon-map: (
&[data-placement='bottom'] .module-tooltip-arrow::before { &[data-placement='bottom'] .module-tooltip-arrow::before {
@include light-theme { @include light-theme {
border-color: transparent transparent $color-gray-20 transparent; border-color: transparent transparent variables.$color-gray-20 transparent;
} }
@include dark-theme { @include dark-theme {
border-color: transparent transparent $color-gray-62 transparent; border-color: transparent transparent variables.$color-gray-62 transparent;
} }
& {
margin-top: -14px; margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px; margin-left: -7px;
} }
}
&[data-placement='bottom'] .module-tooltip-arrow::after { &[data-placement='bottom'] .module-tooltip-arrow::after {
@include light-theme { @include light-theme {
border-bottom-color: $color-gray-04; border-bottom-color: variables.$color-gray-04;
} }
@include dark-theme { @include dark-theme {
border-bottom-color: $color-gray-80; border-bottom-color: variables.$color-gray-80;
} }
} }
&[data-placement='top'] .module-tooltip-arrow::before { &[data-placement='top'] .module-tooltip-arrow::before {
@include light-theme { @include light-theme {
border-color: $color-gray-20 transparent transparent transparent; border-color: variables.$color-gray-20 transparent transparent transparent;
} }
@include dark-theme { @include dark-theme {
border-color: $color-gray-62 transparent transparent transparent; border-color: variables.$color-gray-62 transparent transparent transparent;
} }
& {
margin-top: 0; margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px; margin-left: -7px;
} }
}
&[data-placement='top'] .module-tooltip-arrow::after { &[data-placement='top'] .module-tooltip-arrow::after {
@include light-theme { @include light-theme {
border-top-color: $color-gray-04; border-top-color: variables.$color-gray-04;
} }
@include dark-theme { @include dark-theme {
border-top-color: $color-gray-80; border-top-color: variables.$color-gray-80;
} }
} }
} }
@mixin button-active-call { @mixin button-active-call {
$background: $color-accent-green; $background: variables.$color-accent-green;
@include font-body-2-bold; @include font-body-2-bold;
@include rounded-corners; @include rounded-corners;
@ -985,7 +1125,7 @@ $rtl-icon-map: (
width: auto; width: auto;
align-items: center; align-items: center;
background-color: $background; background-color: $background;
color: $color-white; color: variables.$color-white;
outline: none; outline: none;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -997,8 +1137,9 @@ $rtl-icon-map: (
@include color-svg( @include color-svg(
'../images/icons/v3/video/video-compact-fill.svg', '../images/icons/v3/video/video-compact-fill.svg',
$color-white variables.$color-white
); );
& {
content: ''; content: '';
display: block; display: block;
height: $icon-size; height: $icon-size;
@ -1006,17 +1147,45 @@ $rtl-icon-map: (
min-width: $icon-size; min-width: $icon-size;
width: $icon-size; width: $icon-size;
} }
}
&:not(:disabled) { &:not(:disabled) {
&:hover { &:hover {
@include any-theme { @include any-theme {
background-color: darken($background, 16%); background-color: color.adjust($background, $lightness: -16%);
} }
} }
&:focus { &:focus {
@include keyboard-mode { @include keyboard-mode {
background-color: darken($background, 16%); background-color: color.adjust($background, $lightness: -16%);
}
}
}
}
@mixin module-composition-popper {
width: 332px;
border-radius: 4px;
margin-bottom: 6px;
z-index: variables.$z-index-context-menu;
user-select: none;
overflow: hidden;
@include popper-shadow();
& {
@include light-theme {
background: variables.$color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-02;
}
}
@include dark-theme {
background: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-75;
} }
} }
} }

3149
stylesheets/_modules.scss
View file

File diff suppressed because it is too large Load diff

8
stylesheets/_options.scss
View file

@ -2,9 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../node_modules/intl-tel-input/build/css/intlTelInput.css'; @use '../node_modules/intl-tel-input/build/css/intlTelInput.css';
@import 'fontfaces'; @use 'fontfaces';
@import 'variables'; @use 'variables';
@import 'progress'; @use 'progress';
.iti__flag { .iti__flag {
// override intlTelInput's flags image location // override intlTelInput's flags image location
@ -22,5 +22,5 @@
} }
.intl-tel-input .country-list .country .country-name { .intl-tel-input .country-list .country .country-name {
color: $color-black; color: variables.$color-black;
} }

16
stylesheets/_progress.scss
View file

@ -1,6 +1,8 @@
// Copyright 2017 Signal Messenger, LLC // Copyright 2017 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'variables';
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { from {
background-position: 40px 0; background-position: 40px 0;
@ -12,11 +14,11 @@
.progress-bar-striped { .progress-bar-striped {
background-image: linear-gradient( background-image: linear-gradient(
45deg, 45deg,
$color-white-alpha-60 25%, variables.$color-white-alpha-60 25%,
transparent 25%, transparent 25%,
transparent 50%, transparent 50%,
$color-white-alpha-60 50%, variables.$color-white-alpha-60 50%,
$color-white-alpha-60 75%, variables.$color-white-alpha-60 75%,
transparent 75%, transparent 75%,
transparent transparent
); );
@ -25,11 +27,11 @@
.progress-bar-striped { .progress-bar-striped {
background-image: linear-gradient( background-image: linear-gradient(
45deg, 45deg,
$color-white-alpha-60 25%, variables.$color-white-alpha-60 25%,
transparent 25%, transparent 25%,
transparent 50%, transparent 50%,
$color-white-alpha-60 50%, variables.$color-white-alpha-60 50%,
$color-white-alpha-60 75%, variables.$color-white-alpha-60 75%,
transparent 75%, transparent 75%,
transparent transparent
); );
@ -39,7 +41,7 @@
} }
.bar-container { .bar-container {
background: $color-ios-blue-tint; background: variables.$color-ios-blue-tint;
.progress-bar { .progress-bar {
height: 100%; height: 100%;

25
stylesheets/components/About.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.About { .About {
align-items: center; align-items: center;
@ -11,14 +14,14 @@
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@include light-theme { @include mixins.light-theme {
background-color: $color-white; background-color: variables.$color-white;
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
color: $color-white-alpha-80; color: variables.$color-white-alpha-80;
} }
img { img {
@ -26,16 +29,16 @@
} }
a { a {
@include light-theme { @include mixins.light-theme {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-ultramarine-pastel; color: variables.$color-ultramarine-pastel;
} }
} }
} }
.About__Title { .About__Title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
margin: 0; margin: 0;
} }

27
stylesheets/components/AboutContactModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AboutContactModal { .AboutContactModal {
&__headerTitle.module-Modal__headerTitle { &__headerTitle.module-Modal__headerTitle {
// No padding between header and avatar // No padding between header and avatar
@ -26,7 +29,7 @@
} }
&__title { &__title {
@include font-title-2; @include mixins.font-title-2;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
@ -41,12 +44,12 @@
flex-shrink: 0; flex-shrink: 0;
@mixin about-modal-icon($url) { @mixin about-modal-icon($url) {
@include light-theme { @include mixins.light-theme {
@include color-svg($url, $color-black); @include mixins.color-svg($url, variables.$color-black);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($url, $color-gray-05); @include mixins.color-svg($url, variables.$color-gray-05);
} }
} }
@ -111,8 +114,10 @@
align-items: center; align-items: center;
min-width: 0; min-width: 0;
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
}
&::after { &::after {
content: ''; content: '';
@ -121,21 +126,23 @@
width: 20px; width: 20px;
flex-shrink: 0; flex-shrink: 0;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-45 variables.$color-gray-45
); );
} }
} }
&__verified { &__verified {
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
} }
}
} }
.AboutContactModal__TitleWithoutNickname { .AboutContactModal__TitleWithoutNickname {
color: $color-gray-45; color: variables.$color-gray-45;
} }
.AboutContactModal__OneLineEllipsis { .AboutContactModal__OneLineEllipsis {

12
stylesheets/components/AddGroupMembersModal.scss
View file

@ -1,12 +1,14 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.module-AddGroupMembersModal { .module-AddGroupMembersModal {
$root-selector: &; $root-selector: &;
$padding: 16px; $padding: 16px;
&__header { &__header {
@include font-body-1-bold; @include mixins.font-body-1-bold;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -26,7 +28,7 @@
} }
&__close-button { &__close-button {
@include modal-close-button; @include mixins.modal-close-button;
} }
.module-ContactPills { .module-ContactPills {
@ -46,10 +48,12 @@
} }
&--choose-members { &--choose-members {
@include modal-reset; @include mixins.modal-reset;
& {
padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements. padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements.
height: 60vh; height: 60vh;
min-height: 400px; min-height: 400px;
}
#{$root-selector}__header { #{$root-selector}__header {
padding: $padding; padding: $padding;
@ -57,7 +61,7 @@
} }
&--confirm-adds { &--confirm-adds {
@include modal-reset; @include mixins.modal-reset;
#{$root-selector}__button-container { #{$root-selector}__button-container {
margin-top: 12px; margin-top: 12px;

23
stylesheets/components/AnnouncementsOnlyGroupBanner.scss
View file

@ -1,24 +1,29 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AnnouncementsOnlyGroupBanner { .AnnouncementsOnlyGroupBanner {
&__banner { &__banner {
@include font-subtitle; @include mixins.font-subtitle;
padding: 16px; padding: 16px;
text-align: center; text-align: center;
@include light-theme { @include mixins.light-theme {
border-top: 1px solid $color-gray-05; border-top: 1px solid variables.$color-gray-05;
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
border-top: 1px solid $color-gray-05; border-top: 1px solid variables.$color-gray-05;
color: $color-gray-05; color: variables.$color-gray-05;
} }
&--admins { &--admins {
@include button-reset; @include mixins.button-reset;
color: $color-ultramarine; & {
color: variables.$color-ultramarine;
}
} }
} }
} }

10
stylesheets/components/App.scss
View file

@ -1,6 +1,8 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.App { .App {
height: 100%; height: 100%;
position: relative; position: relative;
@ -10,11 +12,11 @@
flex-direction: column; flex-direction: column;
&.light-theme { &.light-theme {
background-color: $color-white; background-color: variables.$color-white;
color: $color-gray-90; color: variables.$color-gray-90;
} }
&.dark-theme { &.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }

43
stylesheets/components/AudioCapture.scss
View file

@ -1,6 +1,10 @@
// Copyright 2016 Signal Messenger, LLC // Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.AudioCapture { .AudioCapture {
display: flex; display: flex;
text-align: center; text-align: center;
@ -22,9 +26,9 @@
padding: 0; padding: 0;
border: none; border: none;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
@ -36,11 +40,17 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/mic/mic.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/mic/mic.svg',
variables.$color-gray-15
);
} }
} }
} }
@ -71,29 +81,32 @@
} }
&--complete { &--complete {
background: lighten($color-accent-green, 20%); background: color.adjust(variables.$color-accent-green, $lightness: 20%);
border: 1px solid $color-accent-green; border: 1px solid variables.$color-accent-green;
.icon { .icon {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check.svg', '../images/icons/v3/check/check.svg',
$color-accent-green variables.$color-accent-green
); );
} }
} }
&--cancel { &--cancel {
background: lighten($color-accent-red, 20%); background: color.adjust(variables.$color-accent-red, $lightness: 20%);
border: 1px solid $color-accent-red; border: 1px solid variables.$color-accent-red;
.icon { .icon {
@include color-svg('../images/icons/v3/x/x.svg', $color-accent-red); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-accent-red
);
} }
} }
} }
&__time { &__time {
color: $color-gray-60; color: variables.$color-gray-60;
font-variant: tabular-nums; font-variant: tabular-nums;
line-height: 36px; line-height: 36px;
margin-block: 0; margin-block: 0;
@ -117,7 +130,7 @@
border-radius: 10px; border-radius: 10px;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: $color-accent-red; background: variables.$color-accent-red;
margin-inline-end: 10px; margin-inline-end: 10px;
opacity: 0; opacity: 0;
animation: pulse 2s infinite; animation: pulse 2s infinite;

17
stylesheets/components/AutoSizeInput.scss
View file

@ -1,9 +1,12 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AutoSizeInput { .AutoSizeInput {
&__input { &__input {
@include font-body-1; @include mixins.font-body-1;
background: inherit; background: inherit;
border: none; border: none;
@ -13,15 +16,15 @@
width: 20px; width: 20px;
&:placeholder { &:placeholder {
color: $color-gray-45; color: variables.$color-gray-45;
} }
@include light-theme { @include mixins.light-theme {
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
&:focus { &:focus {
@ -35,7 +38,7 @@
top: 0; top: 0;
width: auto; width: auto;
z-index: $z-index-negative; z-index: variables.$z-index-negative;
} }
} }
} }

43
stylesheets/components/Avatar.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-Avatar { .module-Avatar {
display: inline-flex; display: inline-flex;
line-height: 0; line-height: 0;
@ -10,7 +13,8 @@
vertical-align: middle; vertical-align: middle;
&__contents { &__contents {
@include avatar-colors; @include mixins.avatar-colors;
& {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 100%; border-radius: 100%;
@ -20,11 +24,12 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
outline: none; outline: none;
}
@at-root button#{&} { @at-root button#{&} {
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0 0 0 3px $color-ultramarine; box-shadow: 0 0 0 3px variables.$color-ultramarine;
} }
} }
} }
@ -46,10 +51,10 @@
} }
&__click-to-view { &__click-to-view {
@include font-body-2; @include mixins.font-body-2;
align-items: center; align-items: center;
background: $color-black-alpha-20; background: variables.$color-black-alpha-20;
color: $color-white; color: variables.$color-white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -58,19 +63,21 @@
top: 0; top: 0;
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v2/click-outline-24.svg', '../images/icons/v2/click-outline-24.svg',
$color-white variables.$color-white
); );
& {
content: ''; content: '';
display: block; display: block;
height: 24px; height: 24px;
margin-bottom: 8px; margin-bottom: 8px;
width: 24px; width: 24px;
} }
}
&:hover { &:hover {
background: $color-black-alpha-40; background: variables.$color-black-alpha-40;
} }
} }
@ -119,7 +126,7 @@
&__badge { &__badge {
position: absolute; position: absolute;
z-index: $z-index-base; z-index: variables.$z-index-base;
// Positioning should be overridden by JavaScript. These are set defensively. // Positioning should be overridden by JavaScript. These are set defensively.
bottom: 0; bottom: 0;
@ -136,9 +143,9 @@
border: 0; border: 0;
outline: none; outline: none;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
border-radius: 6px; border-radius: 6px;
} }
} }
@ -147,26 +154,26 @@
&--with-story { &--with-story {
border-radius: 100%; border-radius: 100%;
border: 2px solid $color-black-alpha-40; border: 2px solid variables.$color-black-alpha-40;
padding: 3px; padding: 3px;
@include dark-theme { @include mixins.dark-theme {
border-color: $color-white-alpha-40; border-color: variables.$color-white-alpha-40;
&--unread { &--unread {
border-color: $color-ultramarine-dawn; border-color: variables.$color-ultramarine-dawn;
} }
} }
&--unread { &--unread {
border-color: $color-ultramarine-dawn; border-color: variables.$color-ultramarine-dawn;
} }
} }
&--signal-official { &--signal-official {
.module-Avatar__contents { .module-Avatar__contents {
align-items: center; align-items: center;
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }

43
stylesheets/components/AvatarEditor.scss
View file

@ -1,13 +1,17 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AvatarEditor { .AvatarEditor {
&__top-buttons { &__top-buttons {
display: flex; display: flex;
} }
&__button { &__button {
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
@ -21,15 +25,16 @@
min-width: 60px; min-width: 60px;
padding-block: 0; padding-block: 0;
padding-inline: 8px; padding-inline: 8px;
@include light-theme {
background-color: $color-gray-05;
color: $color-black;
} }
@include dark-theme { @include mixins.light-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-05;
color: $color-gray-05; color: variables.$color-black;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
color: variables.$color-gray-05;
} }
&::before { &::before {
@ -40,11 +45,11 @@
} }
@mixin button-icon($icon) { @mixin button-icon($icon) {
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-black); @include mixins.color-svg($icon, variables.$color-black);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-05); @include mixins.color-svg($icon, variables.$color-gray-05);
} }
} }
@ -57,7 +62,7 @@
} }
&:focus { &:focus {
box-shadow: 0 0 0 2px $color-ultramarine; box-shadow: 0 0 0 2px variables.$color-ultramarine;
} }
} }
@ -69,16 +74,16 @@
&__divider { &__divider {
border: none; border: none;
border-bottom: 1px solid $color-gray-15; border-bottom: 1px solid variables.$color-gray-15;
margin-bottom: 24px; margin-bottom: 24px;
margin-top: 20px; margin-top: 20px;
@include light-theme { @include mixins.light-theme {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
} }
} }
@ -91,7 +96,7 @@
} }
&__avatar-selector-title { &__avatar-selector-title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
margin-bottom: 14px; margin-bottom: 14px;
} }
} }

36
stylesheets/components/AvatarPreview.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AvatarPreview { .AvatarPreview {
align-items: center; align-items: center;
display: flex; display: flex;
@ -9,8 +12,8 @@
width: 100%; width: 100%;
&__avatar { &__avatar {
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
border-radius: 100%; border-radius: 100%;
cursor: auto; cursor: auto;
@ -24,9 +27,10 @@
transition: background-color 100ms ease-out; transition: background-color 100ms ease-out;
user-select: none; user-select: none;
width: 80px; width: 80px;
}
&--loading { &--loading {
background: $color-black; background: variables.$color-black;
} }
&--has-image { &--has-image {
@ -34,9 +38,9 @@
background-position: center center; background-position: center center;
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0 0 0 3px $color-ultramarine; box-shadow: 0 0 0 3px variables.$color-ultramarine;
} }
} }
} }
@ -57,7 +61,7 @@
&__upload { &__upload {
align-items: center; align-items: center;
background: $color-gray-02; background: variables.$color-gray-02;
border-radius: 100%; border-radius: 100%;
bottom: 4px; bottom: 4px;
box-shadow: box-shadow:
@ -71,18 +75,24 @@
width: 28px; width: 28px;
&::after { &::after {
@include color-svg('../images/icons/v3/camera/camera.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/camera/camera.svg',
variables.$color-black
);
& {
content: ''; content: '';
display: block; display: block;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
} }
}
&__clear { &__clear {
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
background-color: $color-white; background-color: variables.$color-white;
border-radius: 100%; border-radius: 100%;
box-shadow: box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.12),
@ -94,12 +104,18 @@
inset-inline-end: 0; inset-inline-end: 0;
top: 0; top: 0;
width: 24px; width: 24px;
}
&:after { &:after {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/x/x-compact.svg',
variables.$color-gray-75
);
& {
content: ''; content: '';
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
} }
}
} }

97
stylesheets/components/BackupMediaDownloadProgress.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BackupMediaDownloadProgress { .BackupMediaDownloadProgress {
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
@ -14,16 +17,16 @@
position: relative; position: relative;
&__title { &__title {
@include font-body-2-bold; @include mixins.font-body-2-bold;
} }
@include light-theme { @include mixins.light-theme {
background-color: $color-white; background-color: variables.$color-white;
border: 1px solid $color-gray-20; border: 1px solid variables.$color-gray-20;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-75; background: variables.$color-gray-75;
border: 1px solid $color-gray-60; border: 1px solid variables.$color-gray-60;
} }
} }
@ -37,16 +40,16 @@
display: block; display: block;
width: 24px; width: 24px;
height: 24px; height: 24px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg', '../images/icons/v3/check/check-circle.svg',
$color-ultramarine variables.$color-ultramarine
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg', '../images/icons/v3/check/check-circle.svg',
$color-ultramarine-light variables.$color-ultramarine-light
); );
} }
} }
@ -58,28 +61,30 @@
display: block; display: block;
width: 24px; width: 24px;
height: 24px; height: 24px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/backup/backup-bold.svg', '../images/icons/v3/backup/backup-bold.svg',
$color-ultramarine variables.$color-ultramarine
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/backup/backup-bold.svg', '../images/icons/v3/backup/backup-bold.svg',
$color-ultramarine-light variables.$color-ultramarine-light
); );
} }
} }
} }
button.BackupMediaDownloadProgress__button { button.BackupMediaDownloadProgress__button {
@include button-reset; @include mixins.button-reset;
@include font-subtitle-bold; & {
@include light-theme { @include mixins.font-subtitle-bold;
color: $color-ultramarine; @include mixins.light-theme {
color: variables.$color-ultramarine;
}
@include mixins.dark-theme {
color: variables.$color-ultramarine-light;
} }
@include dark-theme {
color: $color-ultramarine-light;
} }
} }
@ -87,17 +92,23 @@ button.BackupMediaDownloadProgress__button-more {
position: absolute; position: absolute;
inset-inline-end: 14px; inset-inline-end: 14px;
inset-block-start: 10px; inset-block-start: 10px;
@include button-reset; @include mixins.button-reset;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-20); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-20
);
} }
} }
} }
@ -105,17 +116,23 @@ button.BackupMediaDownloadProgress__button-close {
position: absolute; position: absolute;
inset-inline-end: 14px; inset-inline-end: 14px;
inset-block-start: 10px; inset-block-start: 10px;
@include button-reset; @include mixins.button-reset;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-45); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-45
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-20); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-20
);
} }
} }
} }
@ -129,14 +146,14 @@ button.BackupMediaDownloadProgress__button-close {
} }
.BackupMediaDownloadProgress__description { .BackupMediaDownloadProgress__description {
@include font-subtitle; @include mixins.font-subtitle;
@include light-theme { @include mixins.light-theme {
color: rgba($color-gray-60, 0.8); color: rgba(variables.$color-gray-60, 0.8);
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }

19
stylesheets/components/BadgeCarouselIndex.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BadgeCarouselIndex { .BadgeCarouselIndex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -14,21 +17,21 @@
width: 8px; width: 8px;
margin-top: 8px; margin-top: 8px;
@include light-theme { @include mixins.light-theme {
background: $color-black-alpha-20; background: variables.$color-black-alpha-20;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-white-alpha-20; background: variables.$color-white-alpha-20;
} }
&--selected { &--selected {
@include light-theme { @include mixins.light-theme {
background: $color-ultramarine; background: variables.$color-ultramarine;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-ultramarine-light; background: variables.$color-ultramarine-light;
} }
} }
} }

43
stylesheets/components/BadgeDialog.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BadgeDialog { .BadgeDialog {
@mixin fixed-height($height) { @mixin fixed-height($height) {
height: $height; height: $height;
@ -19,16 +22,18 @@
} }
&__nav { &__nav {
$light-color: $color-gray-65; $light-color: variables.$color-gray-65;
$dark-color: $color-gray-05; $dark-color: variables.$color-gray-05;
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-block: 3px; padding-block: 3px;
padding-inline: 0; padding-inline: 0;
}
&[disabled] { &[disabled] {
visibility: hidden; visibility: hidden;
@ -41,34 +46,34 @@
height: 20px; height: 20px;
} }
@include light-theme { @include mixins.light-theme {
&:hover, &:hover,
&:focus { &:focus {
background: $color-gray-02; background: variables.$color-gray-02;
} }
&:active { &:active {
background: $color-gray-05; background: variables.$color-gray-05;
} }
} }
@include dark-theme { @include mixins.dark-theme {
&:hover, &:hover,
&:focus { &:focus {
background: $color-gray-80; background: variables.$color-gray-80;
} }
&:active { &:active {
background: $color-gray-75; background: variables.$color-gray-75;
} }
} }
&--previous::before { &--previous::before {
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg', '../images/icons/v3/chevron/chevron-left.svg',
$light-color $light-color
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg', '../images/icons/v3/chevron/chevron-left.svg',
$dark-color $dark-color
); );
@ -76,14 +81,14 @@
} }
&--next::before { &--next::before {
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg', '../images/icons/v3/chevron/chevron-right.svg',
$light-color $light-color
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg', '../images/icons/v3/chevron/chevron-right.svg',
$dark-color $dark-color
); );
@ -99,7 +104,7 @@
} }
&__name { &__name {
@include font-title-2; @include mixins.font-title-2;
@include fixed-height(3.5em); @include fixed-height(3.5em);
align-items: center; align-items: center;
display: flex; display: flex;
@ -109,7 +114,7 @@
} }
&__description { &__description {
@include font-body-1; @include mixins.font-body-1;
@include fixed-height(5.5em); @include fixed-height(5.5em);
margin-bottom: 12px; margin-bottom: 12px;
} }

12
stylesheets/components/BadgeSustainerInstructionsDialog.scss
View file

@ -1,6 +1,8 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.BadgeSustainerInstructionsDialog { .BadgeSustainerInstructionsDialog {
user-select: none; user-select: none;
@ -9,18 +11,18 @@
} }
&__header { &__header {
@include font-title-2; @include mixins.font-title-2;
text-align: center; text-align: center;
} }
&__subheader { &__subheader {
@include font-body-1; @include mixins.font-body-1;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
} }
&__instructions { &__instructions {
@include font-body-2; @include mixins.font-body-2;
padding: 0; padding: 0;
list-style-position: inside; list-style-position: inside;
@ -33,10 +35,10 @@
margin-inline: auto; margin-inline: auto;
width: 146px; width: 146px;
@include light-theme { @include mixins.light-theme {
background-image: url('../images/mobile-settings-light.svg'); background-image: url('../images/mobile-settings-light.svg');
} }
@include dark-theme { @include mixins.dark-theme {
background-image: url('../images/mobile-settings-dark.svg'); background-image: url('../images/mobile-settings-dark.svg');
} }
} }

37
stylesheets/components/BetterAvatarBubble.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BetterAvatarBubble { .BetterAvatarBubble {
align-items: center; align-items: center;
background-clip: content-box; background-clip: content-box;
@ -18,21 +21,21 @@
position: relative; position: relative;
width: 56px; width: 56px;
@include avatar-colors(); @include mixins.avatar-colors();
&--selected { &--selected {
@include light-theme { @include mixins.light-theme {
border-color: $color-black; border-color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-white; border-color: variables.$color-white;
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
outline: none; outline: none;
} }
} }
@ -42,7 +45,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 100%; border-radius: 100%;
background: $color-black-alpha-20; background: variables.$color-black-alpha-20;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -51,14 +54,18 @@
display: block; display: block;
height: 24px; height: 24px;
width: 24px; width: 24px;
@include color-svg('../images/icons/v3/edit/edit.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-white
);
} }
} }
&__delete { &__delete {
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
background-color: $color-white; background-color: variables.$color-white;
border-radius: 100%; border-radius: 100%;
box-shadow: box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.12),
@ -70,14 +77,20 @@
top: 0; top: 0;
inset-inline-end: 0; inset-inline-end: 0;
width: 20px; width: 20px;
}
&:after { &:after {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/x/x-compact.svg',
variables.$color-gray-75
);
& {
content: ''; content: '';
height: 10px; height: 10px;
width: 10px; width: 10px;
} }
} }
}
&:hover { &:hover {
.BetterAvatarBubble__delete { .BetterAvatarBubble__delete {

242
stylesheets/components/Button.scss
View file

@ -1,6 +1,10 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.module-Button { .module-Button {
@mixin focus-box-shadow($inner-color, $outer-color) { @mixin focus-box-shadow($inner-color, $outer-color) {
&:focus { &:focus {
@ -12,197 +16,229 @@
@mixin hover-and-active-states($background-color, $mix-color) { @mixin hover-and-active-states($background-color, $mix-color) {
&:hover { &:hover {
@include not-disabled { @include mixins.not-disabled {
background: mix($background-color, $mix-color, 85%); background: color.mix($background-color, $mix-color, 85%);
} }
} }
&:active { &:active {
@include not-disabled { @include mixins.not-disabled {
background: mix($background-color, $mix-color, 75%); background: color.mix($background-color, $mix-color, 75%);
} }
} }
} }
@include button-reset; @include mixins.button-reset;
& {
border-radius: 4px; border-radius: 4px;
padding-block: 8px; padding-block: 8px;
padding-inline: 16px; padding-inline: 16px;
text-align: center; text-align: center;
user-select: none; user-select: none;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@include keyboard-mode {
@include focus-box-shadow($color-white, $color-ultramarine);
} }
@include dark-keyboard-mode { @include mixins.keyboard-mode {
@include focus-box-shadow($color-black, $color-ultramarine); @include focus-box-shadow(
variables.$color-white,
variables.$color-ultramarine
);
} }
@include disabled { @include mixins.dark-keyboard-mode {
@include focus-box-shadow(
variables.$color-black,
variables.$color-ultramarine
);
}
@include mixins.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
&--large { &--large {
@include font-title-2; @include mixins.font-title-2;
font-weight: bold; font-weight: bold;
} }
&--medium { &--medium {
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
&--small { &--small {
@include font-body-2; @include mixins.font-body-2;
@include rounded-corners; @include mixins.rounded-corners;
padding-block: 6px; padding-block: 6px;
padding-inline: 12px; padding-inline: 12px;
} }
&--primary { &--primary {
$color: $color-white; $color: variables.$color-white;
$background-color: $color-ultramarine; $background-color: variables.$color-ultramarine;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: fade-out($color, 0.4); color: color.adjust($color, $alpha: -0.4);
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--discouraged { &--discouraged {
@include light-theme { @include mixins.light-theme {
opacity: 0.4; opacity: 0.4;
} }
@include dark-theme { @include mixins.dark-theme {
opacity: 0.5; opacity: 0.5;
} }
} }
@include light-theme { @include mixins.light-theme {
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states(
$background-color,
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states(
$background-color,
variables.$color-white
);
} }
} }
&--secondary { &--secondary {
@include light-theme { @include mixins.light-theme {
$color: $color-gray-90; $color: variables.$color-gray-90;
$background-color: $color-gray-05; $background-color: variables.$color-gray-05;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: $color-black-alpha-40; color: variables.$color-black-alpha-40;
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--affirmative { &--affirmative {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
&--affirmative--discouraged { &--affirmative--discouraged {
color: fade-out($color-ultramarine, 0.5); color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
} }
&--destructive { &--destructive {
color: $color-accent-red; color: variables.$color-accent-red;
} }
&--destructive--discouraged { &--destructive--discouraged {
color: fade-out($color-ultramarine, 0.5); color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
} }
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states(
$background-color,
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
$color: $color-gray-05; $color: variables.$color-gray-05;
$background-color: $color-gray-65; $background-color: variables.$color-gray-65;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: $color-white-alpha-20; color: variables.$color-white-alpha-20;
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--affirmative { &--affirmative {
color: $color-ultramarine-light; color: variables.$color-ultramarine-light;
} }
&--affirmative--discouraged { &--affirmative--discouraged {
color: fade-out($color-ultramarine-light, 0.5); color: color.adjust(variables.$color-ultramarine-light, $alpha: -0.5);
} }
&--destructive { &--destructive {
color: $color-accent-red; color: variables.$color-accent-red;
} }
&--destructive--discouraged { &--destructive--discouraged {
color: fade-out($color-accent-red, 0.5); color: color.adjust(variables.$color-accent-red, $alpha: -0.5);
} }
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states(
$background-color,
variables.$color-white
);
} }
} }
&--destructive { &--destructive {
$color: $color-white; $color: variables.$color-white;
$background-color: $color-accent-red; $background-color: variables.$color-accent-red;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: fade-out($color, 0.4); color: color.adjust($color, $alpha: -0.4);
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
@include light-theme { @include mixins.light-theme {
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states(
$background-color,
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states(
$background-color,
variables.$color-white
);
} }
} }
&--calling { &--calling {
$color: $color-white; $color: variables.$color-white;
$background-color: $color-accent-green; $background-color: variables.$color-accent-green;
@include rounded-corners; @include mixins.rounded-corners;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: fade-out($color, 0.4); color: color.adjust($color, $alpha: -0.4);
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--discouraged { &--discouraged {
@include light-theme { @include mixins.light-theme {
opacity: 0.4; opacity: 0.4;
} }
@include dark-theme { @include mixins.dark-theme {
opacity: 0.5; opacity: 0.5;
} }
} }
@include light-theme { @include mixins.light-theme {
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states(
$background-color,
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states(
$background-color,
variables.$color-white
);
} }
} }
&--system-message { &--system-message {
@include rounded-corners; @include mixins.rounded-corners;
&.module-Button--small { &.module-Button--small {
padding-top: 5px; padding-top: 5px;
@ -210,40 +246,46 @@
font-weight: 500; font-weight: 500;
} }
@include light-theme { @include mixins.light-theme {
$color: $color-ultramarine; $color: variables.$color-ultramarine;
$background-color: $color-gray-02; $background-color: variables.$color-gray-02;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: fade-out($color, 0.4); color: color.adjust($color, $alpha: -0.4);
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--discouraged { &--discouraged {
color: fade-out($color, 0.5); color: color.adjust($color, $alpha: -0.5);
} }
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states(
$background-color,
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
$color: $color-white; $color: variables.$color-white;
$background-color: $color-gray-65; $background-color: variables.$color-gray-65;
color: $color; color: $color;
background: $background-color; background: $background-color;
@include disabled { @include mixins.disabled {
color: fade-out($color, 0.4); color: color.adjust($color, $alpha: -0.4);
background: fade-out($background-color, 0.6); background: color.adjust($background-color, $alpha: -0.6);
} }
&--discouraged { &--discouraged {
color: fade-out($color, 0.5); color: color.adjust($color, $alpha: -0.5);
} }
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states(
$background-color,
variables.$color-white
);
} }
} }
@ -260,27 +302,27 @@
padding: 8px; padding: 8px;
&--discouraged { &--discouraged {
@include light-theme { @include mixins.light-theme {
opacity: 0.4; opacity: 0.4;
} }
@include dark-theme { @include mixins.dark-theme {
opacity: 0.5; opacity: 0.5;
} }
} }
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
color: $color-gray-05; color: variables.$color-gray-05;
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine; box-shadow: 0 0 0 2px variables.$color-ultramarine;
} }
} }
@ -296,11 +338,11 @@
height: 18px; height: 18px;
width: 18px; width: 18px;
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-black); @include mixins.color-svg($icon, variables.$color-black);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-05); @include mixins.color-svg($icon, variables.$color-gray-05);
} }
} }

43
stylesheets/components/CallControls.scss
View file

@ -1,19 +1,22 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallControls { .CallControls {
position: relative; position: relative;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
flex-basis: $CallControls__initial-width; flex-basis: variables.$CallControls__initial-width;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
max-width: $CallControls__max-width; max-width: variables.$CallControls__max-width;
height: $CallControls__height; height: variables.$CallControls__height;
background-color: $color-gray-78; background-color: variables.$color-gray-78;
box-shadow: 0px 4px 14px 0px $color-black-alpha-40; box-shadow: 0px 4px 14px 0px variables.$color-black-alpha-40;
border-radius: 18px; border-radius: 18px;
margin-block-end: 16px; margin-block-end: 16px;
margin-inline: 16px; margin-inline: 16px;
@ -33,7 +36,7 @@
display: flex; display: flex;
max-height: 40px; max-height: 40px;
margin-block-end: 2px; margin-block-end: 2px;
color: $color-gray-15; color: variables.$color-gray-15;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
@ -44,33 +47,35 @@
display: flex; display: flex;
min-height: 18px; min-height: 18px;
max-height: 36px; max-height: 36px;
color: $color-gray-20; color: variables.$color-gray-20;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus-within { &:focus-within {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
outline-offset: 2px; outline-offset: 2px;
} }
} }
} }
.CallControls__Status--ParticipantCount { .CallControls__Status--ParticipantCount {
@include button-reset; @include mixins.button-reset;
& {
display: flex; display: flex;
flex-basis: 100%; flex-basis: 100%;
align-items: center; align-items: center;
}
&::after { &::after {
content: ''; content: '';
display: flex; display: flex;
width: 14px; width: 14px;
height: 14px; height: 14px;
margin-inline-start: 1px; margin-inline-start: 1px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg', '../images/icons/v3/chevron/chevron-right.svg',
$color-gray-20 variables.$color-gray-20
); );
} }
} }
@ -95,17 +100,17 @@
padding-inline: 16px; padding-inline: 16px;
border-radius: 40px; border-radius: 40px;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: box-shadow:
0 0 0 1px $color-gray-80, 0 0 0 1px variables.$color-gray-80,
0 0 0 3px $color-ultramarine !important; 0 0 0 3px variables.$color-ultramarine !important;
} }
} }
} }
.CallControls__JoinLeaveButton--hangup { .CallControls__JoinLeaveButton--hangup {
background-color: $color-accent-red; background-color: variables.$color-accent-red;
} }
.CallControls__JoinLeaveButton .module-spinner__container { .CallControls__JoinLeaveButton .module-spinner__container {
@ -113,20 +118,20 @@
} }
.CallControls__OuterSpacer { .CallControls__OuterSpacer {
flex-basis: calc($calling-local-preview-width + 16px); flex-basis: calc(variables.$calling-local-preview-width + 16px);
} }
.CallControls__ReactionPickerContainer { .CallControls__ReactionPickerContainer {
position: absolute; position: absolute;
inset-inline-start: min(44%, 32vw); inset-inline-start: min(44%, 32vw);
inset-block-end: 70px; inset-block-end: 70px;
z-index: $z-index-toast; z-index: variables.$z-index-toast;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - 155px); max-height: calc(100vh - 155px);
font-size: 13px; font-size: 13px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-20); filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
pointer-events: auto; pointer-events: auto;
} }

4
stylesheets/components/CallLinkAddNameModal.scss
View file

@ -1,13 +1,15 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.CallLinkAddNameModal__Row { .CallLinkAddNameModal__Row {
display: flex; display: flex;
gap: 12px; gap: 12px;
} }
.CallLinkAddNameModal__SrOnly { .CallLinkAddNameModal__SrOnly {
@include sr-only; @include mixins.sr-only;
} }
// Overriding the default styles for the input container // Overriding the default styles for the input container

31
stylesheets/components/CallLinkDetails.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallLinkDetails__Container { .CallLinkDetails__Container {
max-width: 750px; max-width: 750px;
margin-block: 0; margin-block: 0;
@ -27,18 +30,18 @@
.CallLinkDetails__HeaderTitle { .CallLinkDetails__HeaderTitle {
margin: 0; margin: 0;
@include font-title-medium; @include mixins.font-title-medium;
} }
.CallLinkDetails__HeaderDescription { .CallLinkDetails__HeaderDescription {
margin: 0; margin: 0;
user-select: text; user-select: text;
@include font-body-1; @include mixins.font-body-1;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -47,35 +50,35 @@
} }
.CallLinkDetails__HeaderButton--active-call { .CallLinkDetails__HeaderButton--active-call {
@include button-active-call; @include mixins.button-active-call;
} }
.CallLinkDetails__DeleteLink { .CallLinkDetails__DeleteLink {
// Override the default icon color // Override the default icon color
.ConversationDetails-icon__icon--trash::after { .ConversationDetails-icon__icon--trash::after {
@include any-theme { @include mixins.any-theme {
background-color: $color-accent-red; background-color: variables.$color-accent-red;
} }
} }
// Override the default label color // Override the default label color
.ConversationDetails-panel-row__label { .ConversationDetails-panel-row__label {
color: $color-accent-red; color: variables.$color-accent-red;
} }
} }
.CallLinkDetails__DeleteLink--disabled-for-active-call { .CallLinkDetails__DeleteLink--disabled-for-active-call {
.ConversationDetails-icon__icon--trash::after { .ConversationDetails-icon__icon--trash::after {
@include any-theme { @include mixins.any-theme {
background-color: $color-gray-45; background-color: variables.$color-gray-45;
} }
} }
.ConversationDetails-panel-row__label { .ConversationDetails-panel-row__label {
color: $color-gray-45; color: variables.$color-gray-45;
} }
} }
.CallLinkDetails__ApproveAllMembersDisabledTooltip, .CallLinkDetails__ApproveAllMembersDisabledTooltip,
.CallLinkDetails__DeleteLinkTooltip { .CallLinkDetails__DeleteLinkTooltip {
@include tooltip; @include mixins.tooltip;
} }

57
stylesheets/components/CallLinkEditModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
// Overriding default style // Overriding default style
.module-Modal__body.CallLinkEditModal__body { .module-Modal__body.CallLinkEditModal__body {
padding-inline: 12px 3px; padding-inline: 12px 3px;
@ -8,7 +11,7 @@
} }
.CallLinkEditModal__SrOnly { .CallLinkEditModal__SrOnly {
@include sr-only; @include mixins.sr-only;
} }
.CallLinkEditModal__Header { .CallLinkEditModal__Header {
@ -27,18 +30,20 @@
} }
.CallLinkEditModal__Header__Title { .CallLinkEditModal__Header__Title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
.CallLinkEditModal__Header__CallLinkButton { .CallLinkEditModal__Header__CallLinkButton {
@include button-reset; @include mixins.button-reset;
@include font-subtitle; & {
@include mixins.font-subtitle;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
}
@include mixins.dark-theme {
color: variables.$color-gray-25;
} }
@include dark-theme {
color: $color-gray-25;
} }
} }
@ -56,7 +61,7 @@
} }
.CallLinkEditModal__JoinButton { .CallLinkEditModal__JoinButton {
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
.CallLinkEditModal__Row { .CallLinkEditModal__Row {
@ -67,9 +72,11 @@
} }
.CallLinkEditModal__RowButton { .CallLinkEditModal__RowButton {
@include button-reset; @include mixins.button-reset;
& {
width: 100%; width: 100%;
padding-block: 1px; padding-block: 1px;
}
.CallLinkEditModal__Row { .CallLinkEditModal__Row {
border-radius: 8px; border-radius: 8px;
@ -78,33 +85,33 @@
&:hover, &:hover,
&:focus { &:focus {
.CallLinkEditModal__Row { .CallLinkEditModal__Row {
@include light-theme { @include mixins.light-theme {
background: $color-gray-02; background: variables.$color-gray-02;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-75; background: variables.$color-gray-75;
} }
} }
} }
} }
.CallLinkEditModal__Row--Button { .CallLinkEditModal__Row--Button {
@include font-body-2; @include mixins.font-body-2;
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
width: 100%; width: 100%;
@include light-theme { @include mixins.light-theme {
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-15; color: variables.$color-gray-15;
} }
} }
.CallLinkEditModal__RowLabel { .CallLinkEditModal__RowLabel {
@include font-body-1; @include mixins.font-body-1;
flex: 1; flex: 1;
} }
@ -128,11 +135,11 @@
@mixin CallLinkEditModal__RowIcon($iconPath) { @mixin CallLinkEditModal__RowIcon($iconPath) {
&::after { &::after {
@include light-theme { @include mixins.light-theme {
@include color-svg($iconPath, $color-gray-75); @include mixins.color-svg($iconPath, variables.$color-gray-75);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($iconPath, $color-gray-15); @include mixins.color-svg($iconPath, variables.$color-gray-15);
} }
} }
} }
@ -158,5 +165,5 @@
.CallLinkEditModal__Hr { .CallLinkEditModal__Hr {
border: none; border: none;
height: 1px; height: 1px;
background: $color-black-alpha-12; background: variables.$color-black-alpha-12;
} }

41
stylesheets/components/CallLinkPendingParticipantModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
// Overriding default style // Overriding default style
.module-Modal__body_inner.CallLinkPendingParticipantModal__body_inner { .module-Modal__body_inner.CallLinkPendingParticipantModal__body_inner {
align-items: center; align-items: center;
@ -13,22 +16,24 @@
} }
.CallLinkPendingParticipantModal__NameButton { .CallLinkPendingParticipantModal__NameButton {
@include button-reset(); @include mixins.button-reset();
@include font-title-1; & {
@include mixins.font-title-1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
max-width: 100%; max-width: 100%;
margin-top: 12px; margin-top: 12px;
font-weight: 500; font-weight: 500;
color: $color-gray-05; color: variables.$color-gray-05;
cursor: pointer; cursor: pointer;
}
} }
.CallLinkPendingParticipantModal__InContactsIcon { .CallLinkPendingParticipantModal__InContactsIcon {
height: 22px; height: 22px;
width: 22px; width: 22px;
@include any-theme { @include mixins.any-theme {
background-color: currentColor; background-color: currentColor;
} }
} }
@ -41,15 +46,15 @@
position: relative; position: relative;
inset-block-start: 2px; inset-block-start: 2px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
.CallLinkPendingParticipantModal__SharedGroupInfo { .CallLinkPendingParticipantModal__SharedGroupInfo {
margin-top: 10px; margin-top: 10px;
color: $color-gray-25; color: variables.$color-gray-25;
text-align: center; text-align: center;
} }
@ -58,17 +63,18 @@
margin-block: 24px; margin-block: 24px;
border: none; border: none;
height: 1px; height: 1px;
background: $color-gray-65; background: variables.$color-gray-65;
} }
.CallLinkPendingParticipantModal__ActionButton { .CallLinkPendingParticipantModal__ActionButton {
@include button-reset; @include mixins.button-reset;
& {
display: flex; display: flex;
padding-block: 6px; padding-block: 6px;
width: 100%; width: 100%;
align-items: center; align-items: center;
color: $color-gray-05; color: variables.$color-gray-05;
}
} }
.CallLinkPendingParticipantModal__ActionButton:last-child { .CallLinkPendingParticipantModal__ActionButton:last-child {
@ -76,8 +82,8 @@
} }
.CallLinkPendingParticipantModal__ActionButton:focus { .CallLinkPendingParticipantModal__ActionButton:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background: $color-gray-65; background: variables.$color-gray-65;
} }
} }
@ -95,12 +101,15 @@
} }
.CallLinkPendingParticipantModal__ButtonIconContent--approve { .CallLinkPendingParticipantModal__ButtonIconContent--approve {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg', '../images/icons/v3/check/check-circle.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
.CallLinkPendingParticipantModal__ButtonIconContent--deny { .CallLinkPendingParticipantModal__ButtonIconContent--deny {
@include color-svg('../images/icons/v3/x/x-circle.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/x/x-circle.svg',
variables.$color-gray-25
);
} }

6
stylesheets/components/CallReactionBurst.scss
View file

@ -1,16 +1,18 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.CallingReactionsBurstToasts { .CallingReactionsBurstToasts {
position: absolute; position: absolute;
width: 100%; width: 100%;
inset-block-end: calc($CallControls__height + 32px); inset-block-end: calc(variables.$CallControls__height + 32px);
inset-inline-start: 15px; inset-inline-start: 15px;
} }
.CallReactionBursts { .CallReactionBursts {
position: absolute; position: absolute;
z-index: $z-index-toast; z-index: variables.$z-index-toast;
display: flex; display: flex;
} }

11
stylesheets/components/CallSettingsButton.scss
View file

@ -1,13 +1,16 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
@mixin CallSettingsButton-icon($path) { @mixin CallSettingsButton-icon($path) {
@include color-svg($path, $color-gray-15); @include mixins.color-svg($path, variables.$color-gray-15);
} }
.CallSettingsButton__Button { .CallSettingsButton__Button {
align-items: center; align-items: center;
background-color: $color-gray-78; background-color: variables.$color-gray-78;
border: none; border: none;
border-radius: 40px; border-radius: 40px;
display: flex; display: flex;
@ -16,10 +19,10 @@
outline: none; outline: none;
width: 36px; width: 36px;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline-offset: 1px; outline-offset: 1px;
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
} }

48
stylesheets/components/CallingAdhocCallInfo.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingAdhocCallInfo { .CallingAdhocCallInfo {
flex-shrink: 0; flex-shrink: 0;
width: 360px; width: 360px;
@ -41,22 +44,24 @@
} }
.CallingAdhocCallInfo__MenuItem { .CallingAdhocCallInfo__MenuItem {
@include button-reset; @include mixins.button-reset;
@include font-body-2; & {
@include mixins.font-body-2;
display: flex; display: flex;
width: 100%; width: 100%;
padding-block: 8px; padding-block: 8px;
padding-inline: 10px 2px; padding-inline: 10px 2px;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
}
} }
.CallingAdhocCallInfo__MenuItem:hover { .CallingAdhocCallInfo__MenuItem:hover {
background-color: $color-gray-62; background-color: variables.$color-gray-62;
} }
.CallingAdhocCallInfo__MenuItemIcon { .CallingAdhocCallInfo__MenuItemIcon {
background: $color-gray-65; background: variables.$color-gray-65;
display: flex; display: flex;
width: 36px; width: 36px;
height: 36px; height: 36px;
@ -74,11 +79,17 @@
} }
.CallingAdhocCallInfo__MenuItemIcon--copy-link:before { .CallingAdhocCallInfo__MenuItemIcon--copy-link:before {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/copy/copy.svg',
variables.$color-gray-15
);
} }
.CallingAdhocCallInfo__MenuItemIcon--share-via-signal:before { .CallingAdhocCallInfo__MenuItemIcon--share-via-signal:before {
@include color-svg('../images/icons/v3/forward/forward.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/forward/forward.svg',
variables.$color-gray-15
);
} }
.CallingAdhocCallInfo__MenuItemText { .CallingAdhocCallInfo__MenuItemText {
@ -89,30 +100,37 @@
display: flex; display: flex;
margin-block: 16px; margin-block: 16px;
margin-inline: 10px; margin-inline: 10px;
border: 1px solid $color-gray-65; border: 1px solid variables.$color-gray-65;
} }
.CallingAdhocCallInfo__RemoveClient { .CallingAdhocCallInfo__RemoveClient {
@include button-reset; @include mixins.button-reset;
& {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-inline: 8px; margin-inline: 8px;
background: $color-white; background: variables.$color-white;
}
} }
.CallingAdhocCallInfo__UnknownContactInfoButton { .CallingAdhocCallInfo__UnknownContactInfoButton {
@include button-reset; @include mixins.button-reset;
@include color-svg('../images/icons/v3/info/info.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-white
);
& {
display: flex; display: flex;
flex: none; flex: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-inline: 8px; margin-inline: 8px;
}
} }
.CallingAdhocCallInfo__UnknownContactInfoButton:focus { .CallingAdhocCallInfo__UnknownContactInfoButton:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background: $color-ultramarine; background: variables.$color-ultramarine;
} }
} }
@ -132,7 +150,7 @@
.module-Avatar__contents { .module-Avatar__contents {
outline: 2px solid; outline: 2px solid;
outline-color: $color-gray-80; outline-color: variables.$color-gray-80;
} }
} }
@ -141,7 +159,7 @@
.CallingAdhocCallInfo__UnknownContactAvatar .CallingAdhocCallInfo__UnknownContactAvatar
.module-Avatar__contents { .module-Avatar__contents {
// Should match background of .module-calling-participants-list__contact:hover // Should match background of .module-calling-participants-list__contact:hover
outline-color: $color-gray-62; outline-color: variables.$color-gray-62;
} }
.CallingAdhocCallInfo__RemoveClientDialog { .CallingAdhocCallInfo__RemoveClientDialog {

15
stylesheets/components/CallingAudioIndicator.scss
View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingAudioIndicator { .CallingAudioIndicator {
$size: 28px; $size: 28px;
@ -10,11 +13,11 @@
height: $size; height: $size;
min-width: $size; min-width: $size;
width: $size; width: $size;
z-index: $z-index-base; z-index: variables.$z-index-base;
border-radius: calc($size / 2); border-radius: calc($size / 2);
&--with-content { &--with-content {
background: rgba($color-gray-80, 0.7); background: rgba(variables.$color-gray-80, 0.7);
} }
&__content { &__content {
@ -27,9 +30,9 @@
justify-content: center; justify-content: center;
&--muted { &--muted {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/mic/mic-slash-fill-compact-light.svg', '../images/icons/v3/mic/mic-slash-fill-compact-light.svg',
$color-white variables.$color-white
); );
} }
} }
@ -39,12 +42,12 @@
position: absolute; position: absolute;
top: 6px; top: 6px;
inset-inline-end: 6px; inset-inline-end: 6px;
z-index: $z-index-base; z-index: variables.$z-index-base;
} }
.module-ongoing-call__group-call-remote-participant .CallingAudioIndicator { .module-ongoing-call__group-call-remote-participant .CallingAudioIndicator {
position: absolute; position: absolute;
top: 8px; top: 8px;
inset-inline-end: 8px; inset-inline-end: 8px;
z-index: $z-index-base; z-index: variables.$z-index-base;
} }

55
stylesheets/components/CallingButton.scss
View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingButton { .CallingButton {
@mixin icon($path) { @mixin icon($path) {
@include color-svg($path, $color-white); @include mixins.color-svg($path, variables.$color-white);
height: 20px; height: 20px;
width: 20px; width: 20px;
border: none; border: none;
@ -19,10 +22,10 @@
outline: none; outline: none;
width: 36px; width: 36px;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline-offset: 1px; outline-offset: 1px;
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
@ -30,25 +33,43 @@
background-color: $background-color; background-color: $background-color;
div { div {
@include color-svg($icon, $icon-color); @include mixins.color-svg($icon, $icon-color);
& {
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
} }
}
@mixin calling-button-icon-highlighted($icon) { @mixin calling-button-icon-highlighted($icon) {
@include calling-button-icon($icon, $color-gray-15, $color-gray-90); @include calling-button-icon(
$icon,
variables.$color-gray-15,
variables.$color-gray-90
);
} }
@mixin calling-button-icon-regular($icon) { @mixin calling-button-icon-regular($icon) {
@include calling-button-icon($icon, $color-gray-60, $color-gray-15); @include calling-button-icon(
$icon,
variables.$color-gray-60,
variables.$color-gray-15
);
& {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
}
@mixin calling-button-icon-disabled($icon) { @mixin calling-button-icon-disabled($icon) {
@include calling-button-icon($icon, $color-gray-60, $color-gray-15); @include calling-button-icon(
$icon,
variables.$color-gray-60,
variables.$color-gray-15
);
& {
opacity: 0.4; opacity: 0.4;
} }
}
&--audio { &--audio {
$icon: '../images/icons/v3/mic/mic-slash-fill-light.svg'; $icon: '../images/icons/v3/mic/mic-slash-fill-light.svg';
@ -83,8 +104,8 @@
&--hangup { &--hangup {
@include calling-button-icon( @include calling-button-icon(
'../images/icons/v3/phone/phone-down-fill-light.svg', '../images/icons/v3/phone/phone-down-fill-light.svg',
$color-accent-red, variables.$color-accent-red,
$color-white variables.$color-white
); );
} }
@ -168,13 +189,13 @@
} }
&__tooltip { &__tooltip {
background-color: $color-gray-80; background-color: variables.$color-gray-80;
color: $color-gray-15; color: variables.$color-gray-15;
font-size: 13px; font-size: 13px;
outline: 1px solid $color-gray-62; outline: 1px solid variables.$color-gray-62;
padding-block: 5px; padding-block: 5px;
padding-inline: 12px; padding-inline: 12px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-20); filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
pointer-events: none; pointer-events: none;
} }
@ -186,24 +207,24 @@
} }
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::before { &__tooltip[data-placement='bottom'] .module-tooltip-arrow::before {
border-color: transparent transparent $color-gray-62 transparent; border-color: transparent transparent variables.$color-gray-62 transparent;
margin-top: -14px; margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px; margin-left: -7px;
} }
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::after { &__tooltip[data-placement='bottom'] .module-tooltip-arrow::after {
border-bottom-color: $color-gray-80 !important; border-bottom-color: variables.$color-gray-80 !important;
} }
&__tooltip[data-placement='top'] .module-tooltip-arrow::before { &__tooltip[data-placement='top'] .module-tooltip-arrow::before {
border-color: $color-gray-62 transparent transparent transparent; border-color: variables.$color-gray-62 transparent transparent transparent;
margin-top: 0; margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px; margin-left: -7px;
} }
&__tooltip[data-placement='top'] .module-tooltip-arrow::after { &__tooltip[data-placement='top'] .module-tooltip-arrow::after {
border-top-color: $color-gray-80 !important; border-top-color: variables.$color-gray-80 !important;
} }
} }

19
stylesheets/components/CallingLobby.scss
View file

@ -1,15 +1,18 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingLobby { .module-CallingLobby {
&__local-preview { &__local-preview {
position: absolute; position: absolute;
z-index: $z-index-negative; z-index: variables.$z-index-negative;
top: 28px; top: 28px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
&--camera-is-on { &--camera-is-on {
@include lonely-local-video-preview; @include mixins.lonely-local-video-preview;
width: auto; width: auto;
height: 100%; height: 100%;
max-height: calc(100% - 140px); max-height: calc(100% - 140px);
@ -25,7 +28,7 @@
} }
&--camera-is-off { &--camera-is-off {
@include lonely-local-video-preview; @include mixins.lonely-local-video-preview;
width: auto; width: auto;
height: 100%; height: 100%;
max-height: calc(100% - 140px); max-height: calc(100% - 140px);
@ -36,7 +39,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: $color-black-alpha-40; background: variables.$color-black-alpha-40;
} }
} }
} }
@ -53,21 +56,21 @@
} }
.CallingLobby__CallLinkNotice { .CallingLobby__CallLinkNotice {
@include font-caption; @include mixins.font-caption;
display: flex; display: flex;
padding-block: 12px; padding-block: 12px;
padding-inline: 18px; padding-inline: 18px;
margin-block-end: 32px; margin-block-end: 32px;
width: 340px; width: 340px;
background: $color-gray-78; background: variables.$color-gray-78;
color: $color-white; color: variables.$color-white;
border-radius: 10px; border-radius: 10px;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.CallingLobby__CallLinkNotice--join-request-pending { .CallingLobby__CallLinkNotice--join-request-pending {
@include font-body-1; @include mixins.font-body-1;
width: auto; width: auto;
} }

49
stylesheets/components/CallingPendingParticipants.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingPendingParticipants { .CallingPendingParticipants {
width: 420px; width: 420px;
height: auto; height: auto;
@ -18,7 +21,7 @@
} }
.CallingPendingParticipants--Expandable { .CallingPendingParticipants--Expandable {
background: $color-gray-78; background: variables.$color-gray-78;
} }
.CallingPendingParticipants--Expanded { .CallingPendingParticipants--Expanded {
@ -38,19 +41,19 @@
} }
.CallingPendingParticipants__ParticipantButton { .CallingPendingParticipants__ParticipantButton {
@include button-reset(); @include mixins.button-reset();
} }
.CallingPendingParticipants__ParticipantButton:focus { .CallingPendingParticipants__ParticipantButton:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
outline: 3px solid $color-ultramarine; outline: 3px solid variables.$color-ultramarine;
outline-offset: 1px; outline-offset: 1px;
} }
} }
.CallingPendingParticipants__ParticipantName { .CallingPendingParticipants__ParticipantName {
@include font-body-1-bold; @include mixins.font-body-1-bold;
color: $color-gray-15; color: variables.$color-gray-15;
} }
.CallingPendingParticipants__ParticipantAboutIcon { .CallingPendingParticipants__ParticipantAboutIcon {
@ -61,15 +64,15 @@
position: relative; position: relative;
inset-block-start: 3px; inset-block-start: 3px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
.CallingPendingParticipants__WouldLikeToJoin { .CallingPendingParticipants__WouldLikeToJoin {
@include font-body-2; @include mixins.font-body-2;
color: $color-gray-20; color: variables.$color-gray-20;
} }
.CallingPendingParticipants__PendingActionButton { .CallingPendingParticipants__PendingActionButton {
@ -111,11 +114,17 @@
} }
.CallingPendingParticipants__PendingActionButtonIcon--Approve { .CallingPendingParticipants__PendingActionButtonIcon--Approve {
@include color-svg('../images/icons/v3/check/check-bold.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/check/check-bold.svg',
variables.$color-white
);
} }
.CallingPendingParticipants__PendingActionButtonIcon--Deny { .CallingPendingParticipants__PendingActionButtonIcon--Deny {
@include color-svg('../images/icons/v3/x/x-bold.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/x/x-bold.svg',
variables.$color-white
);
} }
.CallingPendingParticipants__ActionPanel { .CallingPendingParticipants__ActionPanel {
@ -133,26 +142,28 @@
} }
.CallingPendingParticipants__ShowAllRequestsButton { .CallingPendingParticipants__ShowAllRequestsButton {
@include button-reset; @include mixins.button-reset;
@include font-body-2-bold; & {
@include mixins.font-body-2-bold;
display: flex; display: flex;
padding-block: 5px; padding-block: 5px;
padding-inline: 15px; padding-inline: 15px;
margin-block: 12px; margin-block: 12px;
margin-inline: auto; margin-inline: auto;
color: $color-white-alpha-90; color: variables.$color-white-alpha-90;
background: $color-gray-65; background: variables.$color-gray-65;
border-radius: 46px; border-radius: 46px;
outline: none; outline: none;
}
} }
.CallingPendingParticipants__ShowAllRequestsButton:focus { .CallingPendingParticipants__ShowAllRequestsButton:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
outline: 3px solid $color-ultramarine; outline: 3px solid variables.$color-ultramarine;
outline-offset: 1px; outline-offset: 1px;
} }
} }
.CallingPendingParticipants__ShowAllRequestsButtonContainer { .CallingPendingParticipants__ShowAllRequestsButtonContainer {
background: $color-black-alpha-24; background: variables.$color-black-alpha-24;
} }

11
stylesheets/components/CallingPreCallInfo.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingPreCallInfo { .module-CallingPreCallInfo {
text-align: center; text-align: center;
user-select: none; user-select: none;
@ -8,22 +11,22 @@
&__title, &__title,
&__subtitle { &__subtitle {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: $color-white; color: variables.$color-white;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@include calling-text-shadow; @include mixins.calling-text-shadow;
} }
&__title { &__title {
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
@include font-title-2; @include mixins.font-title-2;
margin-top: 16px; margin-top: 16px;
} }
&__subtitle { &__subtitle {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@include font-body-1; @include mixins.font-body-1;
margin-top: 8px; margin-top: 8px;
} }
} }

35
stylesheets/components/CallingRaisedHandsList.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingRaisedHandsList { .CallingRaisedHandsList {
width: 100%; width: 100%;
height: auto; height: auto;
@ -45,22 +48,24 @@
} }
.CallingRaisedHandsList__Button { .CallingRaisedHandsList__Button {
@include button-reset; @include mixins.button-reset;
& {
position: absolute; position: absolute;
inset-inline-start: 16px; inset-inline-start: 16px;
inset-block-end: 16px; inset-block-end: 16px;
display: flex; display: flex;
padding-block: 14px; padding-block: 14px;
padding-inline: 12px; padding-inline: 12px;
background: $color-white; background: variables.$color-white;
border-radius: 24px; border-radius: 24px;
color: $color-black; color: variables.$color-black;
font-size: 14px; font-size: 14px;
z-index: $z-index-above-above-base; z-index: variables.$z-index-above-above-base;
}
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
} }
@ -73,9 +78,9 @@
margin-inline-end: 4px; margin-inline-end: 4px;
content: ''; content: '';
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg', '../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-black variables.$color-black
); );
} }
@ -86,23 +91,25 @@
height: $icon-size; height: $icon-size;
content: ''; content: '';
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg', '../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
.CallingRaisedHandsList__LowerMyHandLink { .CallingRaisedHandsList__LowerMyHandLink {
@include button-reset; @include mixins.button-reset;
& {
display: flex; display: flex;
margin-inline-end: 16px; margin-inline-end: 16px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: $color-ultramarine-pastel; color: variables.$color-ultramarine-pastel;
}
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
} }

17
stylesheets/components/CallingRaisedHandsToasts.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingRaisedHandsToast__Content { .CallingRaisedHandsToast__Content {
display: flex; display: flex;
margin-block: 4px; margin-block: 4px;
@ -16,21 +19,23 @@
margin-inline-end: 8px; margin-inline-end: 8px;
content: ''; content: '';
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg', '../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-white variables.$color-white
); );
} }
.CallingRaisedHandsToasts__Link { .CallingRaisedHandsToasts__Link {
@include button-reset; @include mixins.button-reset;
color: $color-ultramarine-pastel; & {
color: variables.$color-ultramarine-pastel;
font-weight: 600; font-weight: 600;
margin-inline-start: 16px; margin-inline-start: 16px;
}
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
} }

9
stylesheets/components/CallingReactionsToasts.scss
View file

@ -1,9 +1,12 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingReactionsToasts { .CallingReactionsToasts {
position: absolute; position: absolute;
inset-block-end: calc($CallControls__height + 32px); inset-block-end: calc(variables.$CallControls__height + 32px);
inset-inline-start: 65px; inset-inline-start: 65px;
width: 100%; width: 100%;
} }
@ -25,9 +28,9 @@
} }
.CallingReactionsToasts .CallingToast { .CallingReactionsToasts .CallingToast {
@include font-body-1; @include mixins.font-body-1;
padding-inline: 16px; padding-inline: 16px;
color: $color-gray-20; color: variables.$color-gray-20;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
transform: rotate(-180deg); transform: rotate(-180deg);

16
stylesheets/components/CallingScreenSharingController.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingScreenSharingController { .module-CallingScreenSharingController {
display: flex; display: flex;
width: 100%; width: 100%;
@ -10,10 +13,10 @@
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@include draggable-region; @include mixins.draggable-region;
&__text { &__text {
@include font-body-2; @include mixins.font-body-2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
user-select: none; user-select: none;
@ -39,11 +42,16 @@
} }
&__close { &__close {
@include button-reset; @include mixins.button-reset;
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
& {
width: 4.5vw; width: 4.5vw;
height: 45.5vh; height: 45.5vh;
margin-inline-start: 2.5vw; margin-inline-start: 2.5vw;
cursor: pointer; cursor: pointer;
} }
}
} }

16
stylesheets/components/CallingSelectPresentingSourcesModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingSelectPresentingSourcesModal { .module-CallingSelectPresentingSourcesModal {
&__width-container { &__width-container {
max-width: 665px; max-width: 665px;
@ -10,7 +13,7 @@
// there's no module-class-name on the footer, // there's no module-class-name on the footer,
// so we have to reference it using the generic selector // so we have to reference it using the generic selector
.module-Modal__button-footer { .module-Modal__button-footer {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
&__sources { &__sources {
@ -30,18 +33,19 @@
} }
&__source { &__source {
@include button-reset(); @include mixins.button-reset();
& {
border-radius: 4px; border-radius: 4px;
border: 1px solid $color-gray-60; border: 1px solid variables.$color-gray-60;
overflow: hidden; overflow: hidden;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
width: 200px; width: 200px;
}
&--selected { &--selected {
background-color: $color-ultramarine-dark; background-color: variables.$color-ultramarine-dark;
border: 1px solid $color-ultramarine-dark; border: 1px solid variables.$color-ultramarine-dark;
} }
img { img {

19
stylesheets/components/CallingStatusIndicator.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingStatusIndicator { .CallingStatusIndicator {
$size: 28px; $size: 28px;
@ -10,9 +13,9 @@
height: $size; height: $size;
min-width: $size; min-width: $size;
width: $size; width: $size;
z-index: $z-index-base; z-index: variables.$z-index-base;
border-radius: calc($size / 2); border-radius: calc($size / 2);
background: rgba($color-gray-80, 0.7); background: rgba(variables.$color-gray-80, 0.7);
&::after { &::after {
content: ''; content: '';
@ -23,26 +26,26 @@
} }
.CallingStatusIndicator--HandRaised { .CallingStatusIndicator--HandRaised {
background: $color-white; background: variables.$color-white;
} }
.CallingStatusIndicator--HandRaised::after { .CallingStatusIndicator--HandRaised::after {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg', '../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-black variables.$color-black
); );
} }
.CallingStatusIndicator--Video::after { .CallingStatusIndicator--Video::after {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-slash-fill-light.svg', '../images/icons/v3/video/video-slash-fill-light.svg',
$color-white variables.$color-white
); );
} }
.module-ongoing-call__footer__local-preview .CallingStatusIndicator { .module-ongoing-call__footer__local-preview .CallingStatusIndicator {
position: absolute; position: absolute;
z-index: $z-index-base; z-index: variables.$z-index-base;
} }
.module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video { .module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video {

21
stylesheets/components/CallingToast.scss
View file

@ -1,9 +1,12 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingToasts { .CallingToasts {
position: fixed; position: fixed;
z-index: $z-index-toast; z-index: variables.$z-index-toast;
top: 32px; top: 32px;
width: 100%; width: 100%;
display: flex; display: flex;
@ -21,16 +24,16 @@
} }
.CallingToast--dismissable { .CallingToast--dismissable {
@include button-reset(); @include mixins.button-reset();
} }
.CallingToast { .CallingToast {
@include font-subtitle; @include mixins.font-subtitle;
padding-block: 8px; padding-block: 8px;
padding-inline: 12px; padding-inline: 12px;
border-radius: 22px; border-radius: 22px;
background-color: $color-gray-80; background-color: variables.$color-gray-80;
color: $color-gray-15; color: variables.$color-gray-15;
text-align: center; text-align: center;
user-select: none; user-select: none;
&__reconnecting { &__reconnecting {
@ -42,10 +45,10 @@
.CallingButtonToasts__outer { .CallingButtonToasts__outer {
position: absolute; position: absolute;
inset-block-end: calc($CallControls__height + 16px); inset-block-end: calc(variables.$CallControls__height + 16px);
width: 100%; width: 100%;
// Match .module-ongoing-call__footer // Match .module-ongoing-call__footer
z-index: $z-index-above-base; z-index: variables.$z-index-above-base;
} }
// Match the width behavior of .CallControls // Match the width behavior of .CallControls
@ -53,8 +56,8 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
flex-basis: $CallControls__initial-width; flex-basis: variables.$CallControls__initial-width;
max-width: $CallControls__max-width; max-width: variables.$CallControls__max-width;
} }
.CallingButtonToasts .CallingToasts { .CallingButtonToasts .CallingToasts {

239
stylesheets/components/CallsTab.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallsTab { .CallsTab {
display: flex; display: flex;
width: 100%; width: 100%;
@ -11,16 +14,16 @@
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-light.svg', '../images/icons/v3/phone/phone-plus-light.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-light.svg', '../images/icons/v3/phone/phone-plus-light.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
@ -29,11 +32,17 @@
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-15
);
} }
} }
@ -52,16 +61,16 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
opacity: 0.7; opacity: 0.7;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-display-bold.svg', '../images/icons/v3/phone/phone-display-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-display-bold.svg', '../images/icons/v3/phone/phone-display-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
} }
@ -71,11 +80,11 @@
margin-inline: 0; margin-inline: 0;
opacity: 0.7; opacity: 0.7;
text-align: center; text-align: center;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -85,16 +94,16 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-bold.svg', '../images/icons/v3/phone/phone-plus-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-bold.svg', '../images/icons/v3/phone/phone-plus-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
} }
@ -110,16 +119,16 @@
} }
.CallsTab__ClearCallHistoryIcon { .CallsTab__ClearCallHistoryIcon {
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/trash/trash-compact.svg', '../images/icons/v3/trash/trash-compact.svg',
$color-gray-90 variables.$color-gray-90
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/trash/trash-compact.svg', '../images/icons/v3/trash/trash-compact.svg',
$color-white variables.$color-white
); );
} }
} }
@ -133,10 +142,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
@include font-body-1-bold; @include mixins.font-body-1-bold;
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
padding-inline-start: 24px; padding-inline-start: 24px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -145,27 +154,29 @@
} }
.CallsList__ToggleFilterByMissed { .CallsList__ToggleFilterByMissed {
@include button-reset; @include mixins.button-reset;
& {
flex-shrink: 0; flex-shrink: 0;
padding: 4px; padding: 4px;
margin-inline-end: 8px; margin-inline-end: 8px;
border-radius: 4px; border-radius: 4px;
}
&:not(.CallsList__ToggleFilterByMissed--pressed):hover { &:not(.CallsList__ToggleFilterByMissed--pressed):hover {
@include light-theme { @include mixins.light-theme {
background-color: $color-black-alpha-06; background-color: variables.$color-black-alpha-06;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-white-alpha-06; background-color: variables.$color-white-alpha-06;
} }
} }
&:focus { &:focus {
outline: none; outline: none;
@include keyboard-mode { @include mixins.keyboard-mode {
box-shadow: box-shadow:
0 0 0 2px $color-white, 0 0 0 2px variables.$color-white,
0 0 0 4px $color-ultramarine; 0 0 0 4px variables.$color-ultramarine;
} }
} }
@ -174,13 +185,16 @@
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/filter/filter.svg', $color-black); @include mixins.color-svg(
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/filter/filter.svg', '../images/icons/v3/filter/filter.svg',
$color-gray-15 variables.$color-black
);
}
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
variables.$color-gray-15
); );
} }
} }
@ -188,14 +202,17 @@
.CallsList__ToggleFilterByMissed--pressed { .CallsList__ToggleFilterByMissed--pressed {
border-radius: 9999px; border-radius: 9999px;
background: $color-accent-blue; background: variables.$color-accent-blue;
&::before { &::before {
@include color-svg('../images/icons/v3/filter/filter.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
variables.$color-white
);
} }
} }
.CallsList__ToggleFilterByMissedLabel { .CallsList__ToggleFilterByMissedLabel {
@include sr-only; @include mixins.sr-only;
} }
.CallsList__ListContainer { .CallsList__ListContainer {
@ -204,7 +221,7 @@
} }
.CallsList__List { .CallsList__List {
@include NavTabs__Scroller; @include mixins.NavTabs__Scroller;
} }
.CallsList__List--disableScrolling { .CallsList__List--disableScrolling {
@ -225,31 +242,43 @@
} }
.CallsList__ItemIcon--Phone { .CallsList__ItemIcon--Phone {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
} }
} }
.CallsList__ItemIcon--Video { .CallsList__ItemIcon--Video {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
} }
} }
.CallsList__LoadingAvatar, .CallsList__LoadingAvatar,
.CallsList__LoadingText { .CallsList__LoadingText {
animation: CallsList__LoadingPulse 1.5s ease-in-out infinite; animation: CallsList__LoadingPulse 1.5s ease-in-out infinite;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-75; background-color: variables.$color-gray-75;
} }
} }
@ -282,11 +311,11 @@
.CallsList__Item--missed .ListTile__subtitle, .CallsList__Item--missed .ListTile__subtitle,
.CallsList__Item--declined .ListTile__subtitle { .CallsList__Item--declined .ListTile__subtitle {
// Need to override the themed selector specificity of .ListTile__subtitle // Need to override the themed selector specificity of .ListTile__subtitle
@include light-theme { @include mixins.light-theme {
color: $color-accent-red; color: variables.$color-accent-red;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-accent-red; color: variables.$color-accent-red;
} }
} }
@ -296,16 +325,16 @@
// Override .ListTile__subtitle with correct font size // Override .ListTile__subtitle with correct font size
.ListTile__subtitle { .ListTile__subtitle {
@include font-body-2; @include mixins.font-body-2;
} }
} }
.CallsList__Item--selected .CallsList__ItemTile { .CallsList__Item--selected .CallsList__ItemTile {
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
} }
@ -325,13 +354,13 @@
} }
.CallsNewCall__List { .CallsNewCall__List {
@include NavTabs__Scroller; @include mixins.NavTabs__Scroller;
} }
.CallsNewCall__ListHeaderItem { .CallsNewCall__ListHeaderItem {
padding-block: 10px; padding-block: 10px;
padding-inline: 24px; padding-inline: 24px;
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
.CallsNewCall__EmptyState { .CallsNewCall__EmptyState {
@ -347,21 +376,23 @@
} }
.CallsNewCall__ItemActionButton { .CallsNewCall__ItemActionButton {
@include button-reset; @include mixins.button-reset;
& {
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
&:not(:disabled, [aria-disabled='true']):hover {
@include light-theme {
background: $color-gray-20;
} }
@include dark-theme { &:not(:disabled, [aria-disabled='true']):hover {
background: $color-gray-62; @include mixins.light-theme {
background: variables.$color-gray-20;
}
@include mixins.dark-theme {
background: variables.$color-gray-62;
} }
} }
&:focus { &:focus {
outline: none; outline: none;
@include keyboard-mode { @include mixins.keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine; box-shadow: 0 0 0 2px variables.$color-ultramarine;
} }
} }
&:disabled, &:disabled,
@ -371,24 +402,28 @@
} }
.CallsNewCall__ItemActionButton--join-call { .CallsNewCall__ItemActionButton--join-call {
@include button-active-call; @include mixins.button-active-call;
& {
height: 26px; height: 26px;
padding-block: 4px; padding-block: 4px;
padding-inline: 10px; padding-inline: 10px;
}
} }
.CallsNewCall__ItemActionButton--join-call-disabled { .CallsNewCall__ItemActionButton--join-call-disabled {
@include light-theme { @include mixins.light-theme {
opacity: 0.4; opacity: 0.4;
} }
@include dark-theme { @include mixins.dark-theme {
opacity: 0.5; opacity: 0.5;
} }
} }
.CallsNewCall__ItemActionButtonTooltip { .CallsNewCall__ItemActionButtonTooltip {
@include tooltip; @include mixins.tooltip;
& {
max-width: 212px; max-width: 212px;
}
} }
.CallsNewCall__ItemIcon { .CallsNewCall__ItemIcon {
@ -398,19 +433,31 @@
} }
.CallsNewCall__ItemIcon--Phone { .CallsNewCall__ItemIcon--Phone {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
} }
} }
.CallsNewCall__ItemIcon--Video { .CallsNewCall__ItemIcon--Video {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
} }
} }

35
stylesheets/components/ChatColorPicker.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ChatColorPicker { .ChatColorPicker {
$bubble-size: 52px; $bubble-size: 52px;
@ -10,12 +13,12 @@
margin-inline: auto; margin-inline: auto;
hr { hr {
@include light-theme { @include mixins.light-theme {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
} }
} }
} }
@ -38,18 +41,18 @@
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
@include color-bubble($bubble-size); @include mixins.color-bubble($bubble-size);
&--selected { &--selected {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
@include dark-theme { @include mixins.dark-theme {
border-color: $color-white; border-color: variables.$color-white;
} }
} }
&:focus { &:focus {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
outline: none; outline: none;
} }
@ -59,19 +62,27 @@
display: block; display: block;
height: 24px; height: 24px;
width: 24px; width: 24px;
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-05); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-05
);
} }
} }
&--custom { &--custom {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
} }
&__add-icon { &__add-icon {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-90); @include mixins.color-svg(
'../images/icons/v3/plus/plus.svg',
variables.$color-gray-90
);
& {
display: block; display: block;
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
}
} }

19
stylesheets/components/Checkbox.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Checkbox { .Checkbox {
&__container { &__container {
align-items: center; align-items: center;
@ -10,17 +13,17 @@
height: 18px; height: 18px;
width: 18px; width: 18px;
@include mouse-mode { @include mixins.mouse-mode {
&:focus, &:focus,
&:active { &:active {
outline: none; outline: none;
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus, &:focus,
&:active { &:active {
outline: 1px solid $color-ultramarine; outline: 1px solid variables.$color-ultramarine;
} }
} }
} }
@ -33,12 +36,12 @@
} }
&__description { &__description {
@include font-subtitle; @include mixins.font-subtitle;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
} }

57
stylesheets/components/CircleCheckbox.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CircleCheckbox { .CircleCheckbox {
&__checkbox { &__checkbox {
position: relative; position: relative;
@ -13,17 +16,17 @@
position: absolute; position: absolute;
width: 0; width: 0;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
&::before { &::before {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
} }
outline: none; outline: none;
} }
} }
&::before { &::before {
@include rounded-corners; @include mixins.rounded-corners;
background: inherit; background: inherit;
content: ''; content: '';
display: block; display: block;
@ -31,11 +34,11 @@
position: absolute; position: absolute;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
border: 1.5px solid $color-gray-25; border: 1.5px solid variables.$color-gray-25;
} }
@include dark-theme { @include mixins.dark-theme {
border: 1.5px solid $color-gray-65; border: 1.5px solid variables.$color-gray-65;
} }
} }
@ -43,30 +46,30 @@
cursor: inherit; cursor: inherit;
} }
@include light-theme { @include mixins.light-theme {
&:disabled { &:disabled {
&::before { &::before {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
} }
&:disabled:checked { &:disabled:checked {
&::before { &::before {
background: $color-gray-15; background: variables.$color-gray-15;
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
} }
} }
@include dark-theme { @include mixins.dark-theme {
&:disabled { &:disabled {
&::before { &::before {
border-color: $color-gray-45; border-color: variables.$color-gray-45;
} }
} }
&:disabled:checked { &:disabled:checked {
&::before { &::before {
background: $color-gray-45; background: variables.$color-gray-45;
border-color: $color-gray-45; border-color: variables.$color-gray-45;
} }
} }
} }
@ -83,15 +86,16 @@
input[type='checkbox'] { input[type='checkbox'] {
&:checked { &:checked {
&:not([disabled])::before { &:not([disabled])::before {
background: $color-ultramarine; background: variables.$color-ultramarine;
border: 1.5px solid $color-ultramarine; border: 1.5px solid variables.$color-ultramarine;
} }
&::after { &::after {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check-compact-bold.svg', '../images/icons/v3/check/check-compact-bold.svg',
$color-white variables.$color-white
); );
& {
width: 14px; width: 14px;
height: 14px; height: 14px;
top: 3px; top: 3px;
@ -99,15 +103,16 @@
} }
} }
} }
}
input[type='radio'] { input[type='radio'] {
&:checked { &:checked {
&::before { &::before {
border: 2px solid $color-ultramarine; border: 2px solid variables.$color-ultramarine;
} }
&::after { &::after {
background: $color-ultramarine; background: variables.$color-ultramarine;
top: 4px; top: 4px;
inset-inline-start: 4px; inset-inline-start: 4px;
width: 12px; width: 12px;
@ -131,12 +136,12 @@
input[type='checkbox'] { input[type='checkbox'] {
&:checked { &:checked {
&::before { &::before {
background: $color-ultramarine; background: variables.$color-ultramarine;
border: 1.5px solid $color-ultramarine; border: 1.5px solid variables.$color-ultramarine;
} }
&::after { &::after {
border: solid $color-white; border: solid variables.$color-white;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
height: 10px; height: 10px;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
@ -151,11 +156,11 @@
input[type='radio'] { input[type='radio'] {
&:checked { &:checked {
&::before { &::before {
border: 2px solid $color-ultramarine; border: 2px solid variables.$color-ultramarine;
} }
&::after { &::after {
background: $color-ultramarine; background: variables.$color-ultramarine;
top: 4px; top: 4px;
/* stylelint-disable-next-line liberty/use-logical-spec */ /* stylelint-disable-next-line liberty/use-logical-spec */
left: 4px; left: 4px;

32
stylesheets/components/ClearFilterButton.scss
View file

@ -1,6 +1,10 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.ClearFilterButton { .ClearFilterButton {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -15,23 +19,31 @@
padding-block: 5px; padding-block: 5px;
padding-inline: 15px; padding-inline: 15px;
@include dark-theme { @include mixins.dark-theme {
background-color: mix($color-gray-80, $color-gray-65, 40%); background-color: color.mix(
color: $color-white; variables.$color-gray-80,
variables.$color-gray-65,
40%
);
color: variables.$color-white;
&:hover { &:hover {
@include not-disabled { @include mixins.not-disabled {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
} }
} }
@include light-theme { @include mixins.light-theme {
background-color: mix($color-gray-04, $color-white, 15%); background-color: color.mix(
color: $color-black; variables.$color-gray-04,
variables.$color-white,
15%
);
color: variables.$color-black;
&:hover { &:hover {
@include not-disabled { @include mixins.not-disabled {
background-color: $color-white; background-color: variables.$color-white;
} }
} }
} }

19
stylesheets/components/ComposeStepButton.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ComposeStepButton { .ComposeStepButton {
&__icon { &__icon {
display: flex; display: flex;
@ -11,11 +14,11 @@
height: 32px; height: 32px;
border-radius: 16px; border-radius: 16px;
@include light-theme { @include mixins.light-theme {
background-color: $color-black-alpha-06; background-color: variables.$color-black-alpha-06;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-white-alpha-12; background-color: variables.$color-white-alpha-12;
} }
&::before { &::before {
@ -26,11 +29,11 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
@include light-theme { @include mixins.light-theme {
background-color: $color-black; background-color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
} }

103
stylesheets/components/CompositionArea.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionArea { .CompositionArea {
position: relative; position: relative;
min-height: 42px; min-height: 42px;
@ -56,14 +59,16 @@
} }
&__edit-button { &__edit-button {
@include button-reset; @include mixins.button-reset;
@include rounded-corners; & {
@include mixins.rounded-corners;
align-items: center; align-items: center;
background-color: $color-gray-45; background-color: variables.$color-gray-45;
display: flex; display: flex;
height: 28px; height: 28px;
justify-content: center; justify-content: center;
width: 28px; width: 28px;
}
&::before { &::before {
content: ''; content: '';
@ -73,14 +78,20 @@
&--discard { &--discard {
&::before { &::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-white
);
} }
} }
&--accept { &--accept {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
margin-inline-start: 16px; margin-inline-start: 16px;
&::before { &::before {
@include color-svg('../images/icons/v3/check/check.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/check/check.svg',
variables.$color-white
);
} }
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
@ -102,9 +113,9 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
flex-shrink: 0; flex-shrink: 0;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/send/send-fill.svg', '../images/icons/v3/send/send-fill.svg',
$color-ultramarine variables.$color-ultramarine
); );
} }
} }
@ -141,12 +152,12 @@
pointer-events: all; pointer-events: all;
} }
@include light-theme() { @include mixins.light-theme() {
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme() { @include mixins.dark-theme() {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
&__button { &__button {
@ -154,35 +165,35 @@
height: 24px; height: 24px;
border: none; border: none;
@include light-theme() { @include mixins.light-theme() {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-up.svg', '../images/icons/v3/chevron/chevron-shallow-up.svg',
$color-gray-45, variables.$color-gray-45,
false false
); );
} }
@include dark-theme() { @include mixins.dark-theme() {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-up.svg', '../images/icons/v3/chevron/chevron-shallow-up.svg',
$color-gray-45, variables.$color-gray-45,
false false
); );
} }
&--large-active { &--large-active {
@include light-theme() { @include mixins.light-theme() {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-down.svg', '../images/icons/v3/chevron/chevron-shallow-down.svg',
$color-gray-45, variables.$color-gray-45,
false false
); );
} }
@include dark-theme() { @include mixins.dark-theme() {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-down.svg', '../images/icons/v3/chevron/chevron-shallow-down.svg',
$color-gray-45, variables.$color-gray-45,
false false
); );
} }
@ -203,38 +214,38 @@
padding-inline: 16px; padding-inline: 16px;
&:not(.module-composition-area--pending) { &:not(.module-composition-area--pending) {
@include light-theme { @include mixins.light-theme {
border-top: 1px solid $color-gray-05; border-top: 1px solid variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
border-top: 1px solid $color-gray-75; border-top: 1px solid variables.$color-gray-75;
} }
} }
&__title { &__title {
@include font-body-2-bold; @include mixins.font-body-2-bold;
margin-block: 0 2px; margin-block: 0 2px;
margin-inline: 0; margin-inline: 0;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
&__body { &__body {
@include font-body-2; @include mixins.font-body-2;
text-align: center; text-align: center;
margin: 0; margin: 0;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
} }
@ -250,9 +261,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
outline: 2px solid $color-ultramarine; outline: 2px solid variables.$color-ultramarine;
} }
} }
@ -264,16 +275,16 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/attach/attach.svg', '../images/icons/v3/attach/attach.svg',
$color-gray-75 variables.$color-gray-75
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/attach/attach.svg', '../images/icons/v3/attach/attach.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }

276
stylesheets/components/CompositionInput.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-composition-input { .module-composition-input {
&__quill { &__quill {
height: 100%; height: 100%;
@ -31,15 +34,15 @@
} }
&__at-mention { &__at-mention {
background-color: $color-gray-20; background-color: variables.$color-gray-20;
border-radius: 4px; border-radius: 4px;
display: inline; display: inline;
padding-inline: 4px; padding-inline: 4px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-60; background-color: variables.$color-gray-60;
} }
} }
@ -54,29 +57,29 @@
.ql-container { .ql-container {
// Inherit global font stack // Inherit global font stack
font-family: inherit; font-family: inherit;
@include font-body-1; @include mixins.font-body-1;
} }
.ql-blank::before { .ql-blank::before {
@include light-theme() { @include mixins.light-theme() {
color: $color-gray-45; color: variables.$color-gray-45;
} }
@include dark-theme() { @include mixins.dark-theme() {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@include light-theme() { @include mixins.light-theme() {
// Same as background color // Same as background color
background-color: $color-gray-05; background-color: variables.$color-gray-05;
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme() { @include mixins.dark-theme() {
// Same as background color // Same as background color
background-color: $color-gray-75; background-color: variables.$color-gray-75;
color: $color-gray-05; color: variables.$color-gray-05;
} }
&__scroller { &__scroller {
@ -89,11 +92,11 @@
overflow: auto; overflow: auto;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@include light-theme { @include mixins.light-theme {
border: 2px solid $color-gray-05; border: 2px solid variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
border: 2px solid $color-gray-75; border: 2px solid variables.$color-gray-75;
} }
} }
@ -116,12 +119,14 @@
} }
} }
& {
border: $border-size solid transparent; border: $border-size solid transparent;
}
&:focus-within { &:focus-within {
outline: 0; outline: 0;
@include keyboard-mode { @include mixins.keyboard-mode {
border: $border-size solid $color-ultramarine; border: $border-size solid variables.$color-ultramarine;
} }
} }
} }
@ -131,7 +136,7 @@
padding-block: 6px; padding-block: 6px;
padding-inline: 12px; padding-inline: 12px;
border-radius: 8px; border-radius: 8px;
z-index: $z-index-above-popup; z-index: variables.$z-index-above-popup;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -144,59 +149,60 @@
0px 4px 10px rgba(0, 0, 0, 30%), 0px 4px 10px rgba(0, 0, 0, 30%),
0px 0px 4px rgba(0, 0, 0, 5%); 0px 0px 4px rgba(0, 0, 0, 5%);
@include light-theme() { @include mixins.light-theme() {
background: $color-white; background: variables.$color-white;
} }
@include dark-theme() { @include mixins.dark-theme() {
background: $color-gray-65; background: variables.$color-gray-65;
} }
&__item { &__item {
$parent: &; $parent: &;
@include button-reset; @include mixins.button-reset;
& {
height: 24px; height: 24px;
width: 24px; width: 24px;
border-radius: 4px; border-radius: 4px;
margin-inline-end: 8px; margin-inline-end: 8px;
}
&:last-child { &:last-child {
margin-inline-end: 0; margin-inline-end: 0;
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
} }
@include dark-mouse-mode { @include mixins.dark-mouse-mode {
&:hover { &:hover {
background-color: $color-gray-60; background-color: variables.$color-gray-60;
} }
} }
&--active { &--active {
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: rgba($color-gray-45, 30%); background-color: rgba(variables.$color-gray-45, 30%);
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
} }
@include dark-mouse-mode { @include mixins.dark-mouse-mode {
&:hover { &:hover {
background-color: rgba($color-gray-45, 50%); background-color: rgba(variables.$color-gray-45, 50%);
} }
} }
} }
&__popover { &__popover {
@include font-subtitle-bold; @include mixins.font-subtitle-bold;
& {
padding-block: 5px; padding-block: 5px;
padding-inline: 8px; padding-inline: 8px;
text-align: center; text-align: center;
@ -205,24 +211,25 @@
opacity: 0; opacity: 0;
transition: opacity 120ms ease-out; transition: opacity 120ms ease-out;
@include light-theme {
background-color: $color-black;
color: $color-gray-05;
} }
@include dark-theme {
background-color: $color-gray-65; @include mixins.light-theme {
color: $color-gray-05; background-color: variables.$color-black;
color: variables.$color-gray-05;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
color: variables.$color-gray-05;
} }
&__shortcut { &__shortcut {
@include font-caption-bold; @include mixins.font-caption-bold;
@include light-theme { @include mixins.light-theme {
color: $color-gray-15; color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
} }
@ -233,76 +240,76 @@
margin: 2px; margin: 2px;
&--bold { &--bold {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-bold-bold.svg', '../images/icons/v3/text_format/textformat-bold-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-bold-bold.svg', '../images/icons/v3/text_format/textformat-bold-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
} }
&--italic { &--italic {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-italic-bold.svg', '../images/icons/v3/text_format/textformat-italic-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-italic-bold.svg', '../images/icons/v3/text_format/textformat-italic-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
} }
&--strike { &--strike {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-strikethrough-bold.svg', '../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-strikethrough-bold.svg', '../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
} }
&--monospace { &--monospace {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-monospace-bold.svg', '../images/icons/v3/text_format/textformat-monospace-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-monospace-bold.svg', '../images/icons/v3/text_format/textformat-monospace-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
} }
&--spoiler { &--spoiler {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-spoiler-bold.svg', '../images/icons/v3/text_format/textformat-spoiler-bold.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/text_format/textformat-spoiler-bold.svg', '../images/icons/v3/text_format/textformat-spoiler-bold.svg',
$color-gray-60 variables.$color-gray-60
); );
} }
} }
@ -310,26 +317,26 @@
// Here we look at hover for the parent so the 2px border is a hover target // Here we look at hover for the parent so the 2px border is a hover target
// Note: We can't use the mixins because .mouse-mode would end up after the > // Note: We can't use the mixins because .mouse-mode would end up after the >
.mouse-mode #{$parent}:hover & { .mouse-mode #{$parent}:hover & {
background-color: $color-gray-90; background-color: variables.$color-gray-90;
} }
.dark-theme.mouse-mode #{$parent}:hover & { .dark-theme.mouse-mode #{$parent}:hover & {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
&--active { &--active {
@include dark-theme { @include mixins.dark-theme {
background-color: $color-ultramarine-light; background-color: variables.$color-ultramarine-light;
} }
@include light-theme { @include mixins.light-theme {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
// Override above hover behaviors // Override above hover behaviors
.mouse-mode #{$parent}:hover & { .mouse-mode #{$parent}:hover & {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
.dark-theme.mouse-mode #{$parent}:hover & { .dark-theme.mouse-mode #{$parent}:hover & {
background-color: $color-ultramarine-light; background-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -341,7 +348,7 @@
padding: 0; padding: 0;
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 8px; border-radius: 8px;
z-index: $z-index-above-popup; z-index: variables.$z-index-above-popup;
overflow: hidden; overflow: hidden;
&--scroller { &--scroller {
@ -349,14 +356,14 @@
overflow-y: auto; overflow-y: auto;
} }
@include popper-shadow(); @include mixins.popper-shadow();
@include light-theme() { @include mixins.light-theme() {
background: $color-white; background: variables.$color-white;
} }
@include dark-theme() { @include mixins.dark-theme() {
background: $color-gray-75; background: variables.$color-gray-75;
} }
&__row { &__row {
@ -379,14 +386,16 @@
outline: 0; outline: 0;
} }
@include font-body-2; & {
@include mixins.font-body-2;
@include light-theme() {
color: $color-gray-60;
} }
@include dark-theme() { @include mixins.light-theme() {
color: $color-gray-25; color: variables.$color-gray-60;
}
@include mixins.dark-theme() {
color: variables.$color-gray-25;
} }
&__short-name { &__short-name {
@ -395,14 +404,14 @@
&--selected, &--selected,
&:hover { &:hover {
@include light-theme() { @include mixins.light-theme() {
background: $color-gray-05; background: variables.$color-gray-05;
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme() { @include mixins.dark-theme() {
background: $color-gray-60; background: variables.$color-gray-60;
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
} }
@ -411,11 +420,13 @@
padding-inline-start: 8px; padding-inline-start: 8px;
} }
stroke: $color-white; & {
stroke: variables.$color-white;
}
} }
&__editing-message { &__editing-message {
@include font-body-2-bold; @include mixins.font-body-2-bold;
margin-top: 10px; margin-top: 10px;
user-select: none; user-select: none;
@ -428,10 +439,16 @@
width: 16px; width: 16px;
vertical-align: middle; vertical-align: middle;
@include color-svg('../images/icons/v3/edit/edit.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-black
);
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-15
);
} }
} }
@ -447,7 +464,7 @@
} }
div.CompositionInput__link-preview { div.CompositionInput__link-preview {
background: $color-gray-02; background: variables.$color-gray-02;
border-radius: 8px; border-radius: 8px;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
@ -455,8 +472,8 @@ div.CompositionInput__link-preview {
min-height: 74px; min-height: 74px;
overflow: hidden; overflow: hidden;
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-80; background: variables.$color-gray-80;
} }
&__icon-container { &__icon-container {
@ -480,10 +497,10 @@ div.CompositionInput__link-preview {
button.CompositionInput__link-preview__close-button { button.CompositionInput__link-preview__close-button {
-webkit-mask: none; -webkit-mask: none;
@include rounded-corners; @include mixins.rounded-corners;
align-items: center; align-items: center;
backdrop-filter: blur(32px); backdrop-filter: blur(32px);
background: $color-white-alpha-80; background: variables.$color-white-alpha-80;
display: flex; display: flex;
height: 20px; height: 20px;
justify-content: center; justify-content: center;
@ -492,13 +509,18 @@ button.CompositionInput__link-preview__close-button {
width: 20px; width: 20px;
&::before { &::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-75
);
& {
content: ''; content: '';
height: 16px; height: 16px;
width: 16px; width: 16px;
}
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
} }
} }
@ -506,16 +528,16 @@ button.CompositionInput__link-preview__close-button {
// Note: These are referenced in formatting/matchers.ts, to detect these styles on paste // Note: These are referenced in formatting/matchers.ts, to detect these styles on paste
.quill { .quill {
&--monospace { &--monospace {
font-family: $monospace; font-family: variables.$monospace;
} }
&--spoiler { &--spoiler {
@include light-theme { @include mixins.light-theme {
// vs color/$color-gray-90, background/$color-gray-05 // vs color/$color-gray-90, background/$color-gray-05
background-color: $color-gray-25; background-color: variables.$color-gray-25;
} }
@include dark-theme { @include mixins.dark-theme {
// vs color/$color-gray-05, background/$color-gray-95 // vs color/$color-gray-05, background/$color-gray-95
background-color: $color-gray-45; background-color: variables.$color-gray-45;
} }
} }
} }

17
stylesheets/components/CompositionRecording.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionRecording { .CompositionRecording {
display: flex; display: flex;
align-items: center; align-items: center;
@ -18,11 +21,11 @@
padding-block: 6px; padding-block: 6px;
padding-inline: 12px; padding-inline: 12px;
@include light-theme { @include mixins.light-theme {
background: $color-gray-05; background: variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-75; background: variables.$color-gray-75;
} }
} }
@ -30,12 +33,14 @@
display: inline-block; display: inline-block;
height: 20px; height: 20px;
width: 20px; width: 20px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/mic/mic-fill.svg', '../images/icons/v3/mic/mic-fill.svg',
$color-accent-red variables.$color-accent-red
); );
& {
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
}
&__timer { &__timer {
min-width: 40px; min-width: 40px;

15
stylesheets/components/CompositionTextArea.scss
View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionTextArea { .CompositionTextArea {
position: relative; position: relative;
@ -15,7 +18,7 @@
border: none; border: none;
} }
@include dark-theme() { @include mixins.dark-theme() {
border: none; border: none;
&:focus-within { &:focus-within {
@ -23,9 +26,9 @@
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus-within { &:focus-within {
border: solid 1px $color-ultramarine; border: solid 1px variables.$color-ultramarine;
} }
} }
} }
@ -45,13 +48,13 @@
top: 8px; top: 8px;
button::after { button::after {
background-color: $color-black; background-color: variables.$color-black;
} }
} }
&__remaining-character-count { &__remaining-character-count {
@include font-subtitle; @include mixins.font-subtitle;
color: $color-gray-45; color: variables.$color-gray-45;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
inset-inline-start: 0; inset-inline-start: 0;

85
stylesheets/components/ContactListItem.scss
View file

@ -1,79 +1,82 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContactListItem { .ContactListItem {
&__context-menu { &__context-menu {
&__chat-icon { &__chat-icon {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chat/chat-compact.svg', '../images/icons/v3/chat/chat-compact.svg',
$color-white variables.$color-white
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chat/chat-compact.svg', '../images/icons/v3/chat/chat-compact.svg',
$color-black variables.$color-black
); );
} }
} }
&__phone-icon { &__phone-icon {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-compact.svg', '../images/icons/v3/phone/phone-compact.svg',
$color-white variables.$color-white
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-compact.svg', '../images/icons/v3/phone/phone-compact.svg',
$color-black variables.$color-black
); );
} }
} }
&__video-icon { &__video-icon {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-compact.svg', '../images/icons/v3/video/video-compact.svg',
$color-white variables.$color-white
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-compact.svg', '../images/icons/v3/video/video-compact.svg',
$color-black variables.$color-black
); );
} }
} }
&__delete-icon { &__delete-icon {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg', '../images/icons/v3/minus/minus-circle-compact.svg',
$color-white variables.$color-white
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg', '../images/icons/v3/minus/minus-circle-compact.svg',
$color-black variables.$color-black
); );
} }
} }
&__block-icon { &__block-icon {
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/block/block-compact.svg', '../images/icons/v3/block/block-compact.svg',
$color-white variables.$color-white
); );
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/block/block-compact.svg', '../images/icons/v3/block/block-compact.svg',
$color-black variables.$color-black
); );
} }
} }
@ -91,12 +94,12 @@
} }
&:hover { &:hover {
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-20; background-color: variables.$color-gray-20;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-80; background-color: variables.$color-gray-80;
} }
} }
@ -111,11 +114,17 @@
height: 20px; height: 20px;
content: ''; content: '';
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-white
);
} }
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-black
);
} }
} }
} }

156
stylesheets/components/ContactModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContactModal { .ContactModal {
align-items: center; align-items: center;
display: flex; display: flex;
@ -11,8 +14,9 @@
padding-inline: 24px; padding-inline: 24px;
&__name { &__name {
@include button-reset(); @include mixins.button-reset();
@include font-title-1; & {
@include mixins.font-title-1;
font-weight: 400; font-weight: 400;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -22,6 +26,7 @@
margin-top: 12px; margin-top: 12px;
cursor: pointer; cursor: pointer;
} }
}
&__name__text { &__name__text {
overflow: hidden; overflow: hidden;
@ -32,7 +37,7 @@
&__name__contact-icon { &__name__contact-icon {
height: 22px; height: 22px;
width: 22px; width: 22px;
@include any-theme { @include mixins.any-theme {
background-color: currentColor; background-color: currentColor;
} }
} }
@ -48,16 +53,16 @@
position: relative; position: relative;
inset-block-start: 2px; inset-block-start: 2px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-90 variables.$color-gray-90
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
} }
@ -77,32 +82,33 @@
} }
&__button { &__button {
@include button-reset; @include mixins.button-reset;
& {
display: flex; display: flex;
align-items: center; align-items: center;
padding-block: 6px; padding-block: 6px;
width: 100%; width: 100%;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
background-color: $color-gray-02; background-color: variables.$color-gray-02;
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-80; background-color: variables.$color-gray-80;
} }
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background-color: $color-gray-02; background-color: variables.$color-gray-02;
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
background-color: $color-gray-80; background-color: variables.$color-gray-80;
} }
} }
} }
@ -119,12 +125,18 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-15
);
} }
} }
@ -132,12 +144,18 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/chat/chat.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/chat/chat.svg',
variables.$color-gray-15
);
} }
} }
@ -145,17 +163,17 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/safety_number/safety_number.svg', '../images/icons/v3/safety_number/safety_number.svg',
$color-gray-75 variables.$color-gray-75
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/safety_number/safety_number.svg', '../images/icons/v3/safety_number/safety_number.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
@ -164,12 +182,18 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/block/block.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/block/block.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/block/block.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/block/block.svg',
variables.$color-gray-15
);
} }
} }
@ -177,12 +201,18 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/key/key.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/key/key.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/key/key.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/key/key.svg',
variables.$color-gray-15
);
} }
} }
@ -190,17 +220,17 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/plus/plus-circle.svg', '../images/icons/v3/plus/plus-circle.svg',
$color-gray-75 variables.$color-gray-75
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/plus/plus-circle.svg', '../images/icons/v3/plus/plus-circle.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
@ -209,12 +239,18 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/leave/leave.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/leave/leave.svg',
variables.$color-gray-15
);
} }
} }
@ -237,7 +273,7 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 5px; border-radius: 5px;
background: $color-white; background: variables.$color-white;
} }
} }
@ -251,9 +287,9 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/official/official-compact.svg', '../images/icons/v3/official/official-compact.svg',
$color-ultramarine variables.$color-ultramarine
); );
} }
} }
@ -276,9 +312,9 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/official/official.svg', '../images/icons/v3/official/official.svg',
$color-ultramarine variables.$color-ultramarine
); );
} }
} }
@ -299,14 +335,16 @@
border-bottom: none; border-bottom: none;
border-width: 1px; border-width: 1px;
@include light-theme { @include mixins.light-theme {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
} }
& {
margin-block: 8px 5px; margin-block: 8px 5px;
} }
}
} }

78
stylesheets/components/ContactName.scss
View file

@ -1,8 +1,10 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
button.module-contact-name { button.module-contact-name {
@include button-reset; @include mixins.button-reset;
&:hover, &:hover,
&:focus { &:focus {
@ -10,7 +12,7 @@ button.module-contact-name {
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
outline: auto; outline: auto;
text-decoration: none; text-decoration: none;
} }
@ -20,252 +22,252 @@ button.module-contact-name {
.module-contact-name { .module-contact-name {
&--000 { &--000 {
color: #d00b0b; color: #d00b0b;
@include dark-theme { @include mixins.dark-theme {
color: #ff7070; color: #ff7070;
} }
} }
&--010 { &--010 {
color: #c13215; color: #c13215;
@include dark-theme { @include mixins.dark-theme {
color: #ff6f52; color: #ff6f52;
} }
} }
&--020 { &--020 {
color: #b34209; color: #b34209;
@include dark-theme { @include mixins.dark-theme {
color: #f57a3d; color: #f57a3d;
} }
} }
&--030 { &--030 {
color: #9c5711; color: #9c5711;
@include dark-theme { @include mixins.dark-theme {
color: #d5920b; color: #d5920b;
} }
} }
&--040 { &--040 {
color: #866118; color: #866118;
@include dark-theme { @include mixins.dark-theme {
color: #d68f00; color: #d68f00;
} }
} }
&--050 { &--050 {
color: #76681e; color: #76681e;
@include dark-theme { @include mixins.dark-theme {
color: #b89b0a; color: #b89b0a;
} }
} }
&--060 { &--060 {
color: #6b6b24; color: #6b6b24;
@include dark-theme { @include mixins.dark-theme {
color: #a4a437; color: #a4a437;
} }
} }
&--070 { &--070 {
color: #5e6e0c; color: #5e6e0c;
@include dark-theme { @include mixins.dark-theme {
color: #8faa09; color: #8faa09;
} }
} }
&--080 { &--080 {
color: #4b7000; color: #4b7000;
@include dark-theme { @include mixins.dark-theme {
color: #74ad00; color: #74ad00;
} }
} }
&--090 { &--090 {
color: #3d7406; color: #3d7406;
@include dark-theme { @include mixins.dark-theme {
color: #5eb309; color: #5eb309;
} }
} }
&--100 { &--100 {
color: #2d7906; color: #2d7906;
@include dark-theme { @include mixins.dark-theme {
color: #42b309; color: #42b309;
} }
} }
&--110 { &--110 {
color: #2d761e; color: #2d761e;
@include dark-theme { @include mixins.dark-theme {
color: #43b42d; color: #43b42d;
} }
} }
&--120 { &--120 {
color: #067906; color: #067906;
@include dark-theme { @include mixins.dark-theme {
color: #0ab80a; color: #0ab80a;
} }
} }
&--130 { &--130 {
color: #067919; color: #067919;
@include dark-theme { @include mixins.dark-theme {
color: #0ab827; color: #0ab827;
} }
} }
&--140 { &--140 {
color: #06792d; color: #06792d;
@include dark-theme { @include mixins.dark-theme {
color: #0ab844; color: #0ab844;
} }
} }
&--150 { &--150 {
color: #007a3d; color: #007a3d;
@include dark-theme { @include mixins.dark-theme {
color: #00b85c; color: #00b85c;
} }
} }
&--160 { &--160 {
color: #067953; color: #067953;
@include dark-theme { @include mixins.dark-theme {
color: #00b87a; color: #00b87a;
} }
} }
&--170 { &--170 {
color: #067462; color: #067462;
@include dark-theme { @include mixins.dark-theme {
color: #09b397; color: #09b397;
} }
} }
&--180 { &--180 {
color: #007575; color: #007575;
@include dark-theme { @include mixins.dark-theme {
color: #00b2b2; color: #00b2b2;
} }
} }
&--190 { &--190 {
color: #077288; color: #077288;
@include dark-theme { @include mixins.dark-theme {
color: #00aed1; color: #00aed1;
} }
} }
&--200 { &--200 {
color: #006da3; color: #006da3;
@include dark-theme { @include mixins.dark-theme {
color: #00a7fa; color: #00a7fa;
} }
} }
&--210 { &--210 {
color: #5b6976; color: #5b6976;
@include dark-theme { @include mixins.dark-theme {
color: #8ba1b6; color: #8ba1b6;
} }
} }
&--220 { &--220 {
color: #2662d9; color: #2662d9;
@include dark-theme { @include mixins.dark-theme {
color: #7da1e8; color: #7da1e8;
} }
} }
&--230 { &--230 {
color: #2e51ff; color: #2e51ff;
@include dark-theme { @include mixins.dark-theme {
color: #8599ff; color: #8599ff;
} }
} }
&--240 { &--240 {
color: #5151f6; color: #5151f6;
@include dark-theme { @include mixins.dark-theme {
color: #9494ff; color: #9494ff;
} }
} }
&--250 { &--250 {
color: #6447f5; color: #6447f5;
@include dark-theme { @include mixins.dark-theme {
color: #a18ff9; color: #a18ff9;
} }
} }
&--260 { &--260 {
color: #7a3df5; color: #7a3df5;
@include dark-theme { @include mixins.dark-theme {
color: #af8af9; color: #af8af9;
} }
} }
&--270 { &--270 {
color: #8f2af4; color: #8f2af4;
@include dark-theme { @include mixins.dark-theme {
color: #bf80ff; color: #bf80ff;
} }
} }
&--280 { &--280 {
color: #a20ced; color: #a20ced;
@include dark-theme { @include mixins.dark-theme {
color: #cf7cf8; color: #cf7cf8;
} }
} }
&--290 { &--290 {
color: #af0bd0; color: #af0bd0;
@include dark-theme { @include mixins.dark-theme {
color: #e06ef7; color: #e06ef7;
} }
} }
&--300 { &--300 {
color: #b814b8; color: #b814b8;
@include dark-theme { @include mixins.dark-theme {
color: #f65af6; color: #f65af6;
} }
} }
&--310 { &--310 {
color: #c20aa3; color: #c20aa3;
@include dark-theme { @include mixins.dark-theme {
color: #f75fdd; color: #f75fdd;
} }
} }
&--320 { &--320 {
color: #c70a88; color: #c70a88;
@include dark-theme { @include mixins.dark-theme {
color: #f76ec9; color: #f76ec9;
} }
} }
&--330 { &--330 {
color: #cc0066; color: #cc0066;
@include dark-theme { @include mixins.dark-theme {
color: #f76eb2; color: #f76eb2;
} }
} }
&--340 { &--340 {
color: #d00b4d; color: #d00b4d;
@include dark-theme { @include mixins.dark-theme {
color: #ff6b9c; color: #ff6b9c;
} }
} }
&--350 { &--350 {
color: #d00b2c; color: #d00b2c;
@include dark-theme { @include mixins.dark-theme {
color: #f77389; color: #f77389;
} }
} }

51
stylesheets/components/ContactPill.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactPill { .module-ContactPill {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
@ -10,31 +13,31 @@
padding-inline: 8px; padding-inline: 8px;
border-radius: 6px; border-radius: 6px;
@include light-theme { @include mixins.light-theme {
background: $color-black-alpha-08; background: variables.$color-black-alpha-08;
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-white-alpha-12; background: variables.$color-white-alpha-12;
color: $color-gray-05; color: variables.$color-gray-05;
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus-within { &:focus-within {
@include light-theme { @include mixins.light-theme {
background: $color-gray-45; background: variables.$color-gray-45;
color: $color-white; color: variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-25; background: variables.$color-gray-25;
color: $color-gray-90; color: variables.$color-gray-90;
} }
} }
} }
&__contact-name { &__contact-name {
@include font-body-2; @include mixins.font-body-2;
padding-block: 0; padding-block: 0;
padding-inline: 6px; padding-inline: 6px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -45,7 +48,8 @@
&__remove { &__remove {
$icon: '../images/icons/v3/x/x-compact-light.svg'; $icon: '../images/icons/v3/x/x-compact-light.svg';
@include button-reset; @include mixins.button-reset;
& {
height: 100%; height: 100%;
display: flex; display: flex;
width: 16px; width: 16px;
@ -53,6 +57,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; padding: 0;
}
&::before { &::before {
content: ''; content: '';
@ -60,25 +65,25 @@
height: 100%; height: 100%;
display: block; display: block;
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-gray-60); @include mixins.color-svg($icon, variables.$color-gray-60);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-25); @include mixins.color-svg($icon, variables.$color-gray-25);
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
&::before { &::before {
@include color-svg($icon, $color-white); @include mixins.color-svg($icon, variables.$color-white);
} }
} }
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
&:focus { &:focus {
&::before { &::before {
@include color-svg($icon, $color-gray-90); @include mixins.color-svg($icon, variables.$color-gray-90);
} }
} }
} }

7
stylesheets/components/ContactPills.scss
View file

@ -1,9 +1,11 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
.module-ContactPills { @use '../mixins';
@include smooth-scroll;
.module-ContactPills {
@include mixins.smooth-scroll;
& {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 10px; margin-bottom: 10px;
@ -13,6 +15,7 @@
padding-block: 4px; padding-block: 4px;
padding-inline: 16px; padding-inline: 16px;
gap: 8px 12px; gap: 8px 12px;
}
.module-ContactPill { .module-ContactPill {
max-width: calc( max-width: calc(

23
stylesheets/components/ContactSpoofingReviewDialog.scss
View file

@ -1,18 +1,21 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactSpoofingReviewDialog { .module-ContactSpoofingReviewDialog {
user-select: none; user-select: none;
p { p {
@include font-body-2; @include mixins.font-body-2;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
@ -21,7 +24,7 @@
} }
h2 { h2 {
@include font-body-1-bold; @include mixins.font-body-1-bold;
margin-top: 28px; margin-top: 28px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -32,11 +35,11 @@
margin-block: 12px; margin-block: 12px;
margin-inline: 0; margin-inline: 0;
@include light-theme { @include mixins.light-theme {
background: $color-gray-05; background: variables.$color-gray-05;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-75; background: variables.$color-gray-75;
} }
} }

35
stylesheets/components/ContactSpoofingReviewDialogPerson.scss
View file

@ -1,13 +1,16 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactSpoofingReviewDialogPerson { .module-ContactSpoofingReviewDialogPerson {
display: flex; display: flex;
padding-block: 8px; padding-block: 8px;
gap: 16px; gap: 16px;
&:is(button) { &:is(button) {
@include button-reset; @include mixins.button-reset;
} }
&__info { &__info {
@ -16,23 +19,25 @@
gap: 12px; gap: 12px;
&__contact-name { &__contact-name {
@include font-body-1-bold; @include mixins.font-body-1-bold;
display: block; display: block;
} }
&__property { &__property {
@include font-body-2; @include mixins.font-body-2;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
& {
display: flex; display: flex;
gap: 12px; gap: 12px;
}
&__icon { &__icon {
display: inline-block; display: inline-block;
@ -42,12 +47,12 @@
flex-shrink: 0; flex-shrink: 0;
@mixin contact-spoofing-icon($url) { @mixin contact-spoofing-icon($url) {
@include light-theme { @include mixins.light-theme {
@include color-svg($url, $color-gray-90); @include mixins.color-svg($url, variables.$color-gray-90);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($url, $color-gray-05); @include mixins.color-svg($url, variables.$color-gray-05);
} }
} }
@ -79,8 +84,10 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
}
&::after { &::after {
content: ''; content: '';
@ -88,9 +95,9 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-45 variables.$color-gray-45
); );
} }
} }

57
stylesheets/components/ContextMenu.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContextMenu { .ContextMenu {
&__container { &__container {
align-items: center; align-items: center;
@ -9,11 +12,13 @@
} }
&__popper { &__popper {
@extend %module-composition-popper; @include mixins.module-composition-popper;
& {
margin: 0; margin: 0;
padding-block: 6px; padding-block: 6px;
padding-inline: 0px; padding-inline: 0px;
width: auto; width: auto;
}
&--single-item { &--single-item {
padding: 0; padding: 0;
@ -21,19 +26,20 @@
} }
&__title { &__title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
margin-bottom: 12px; margin-bottom: 12px;
} }
&__button { &__button {
@include button-reset(); @include mixins.button-reset();
} }
&__option { &__option {
@include button-reset(); @include mixins.button-reset();
@include font-body-2; & {
@include dark-theme { @include mixins.font-body-2;
color: $color-gray-05; @include mixins.dark-theme {
color: variables.$color-gray-05;
} }
align-items: center; align-items: center;
@ -41,6 +47,7 @@
justify-content: space-between; justify-content: space-between;
min-width: 150px; min-width: 150px;
width: 100%; width: 100%;
}
&--container { &--container {
display: flex; display: flex;
@ -58,16 +65,16 @@
} }
} }
&--selected::before { &--selected::before {
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check.svg', '../images/icons/v3/check/check.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/check/check.svg', '../images/icons/v3/check/check.svg',
$color-white variables.$color-white
); );
} }
} }
@ -84,28 +91,28 @@
} }
&--title { &--title {
@include font-body-2; @include mixins.font-body-2;
} }
&--description { &--description {
@include font-subtitle; @include mixins.font-subtitle;
} }
&:hover { &:hover {
@include light-theme() { @include mixins.light-theme() {
background-color: $color-gray-05; background-color: variables.$color-gray-05;
} }
@include dark-theme() { @include mixins.dark-theme() {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
} }
&--focused, &--focused,
&:focus, &:focus,
&:active { &:active {
@include keyboard-mode { @include mixins.keyboard-mode {
box-shadow: 0 0 1px 1px $color-ultramarine; box-shadow: 0 0 1px 1px variables.$color-ultramarine;
outline: none; outline: none;
} }
} }
@ -119,12 +126,12 @@
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
@include light-theme { @include mixins.light-theme {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-gray-65; border-color: variables.$color-gray-65;
} }
} }
} }

194
stylesheets/components/ConversationDetails.scss
View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationDetails { .ConversationDetails {
&__chat-color { &__chat-color {
@include color-bubble(32px); @include mixins.color-bubble(32px);
} }
&-membership-list, &-membership-list,
@ -11,12 +14,17 @@
&__add-members-icon, &__add-members-icon,
&__add-to-group-icon { &__add-to-group-icon {
@mixin plus-icon($color) { @mixin plus-icon($color) {
@include color-svg('../images/icons/v3/plus/plus-compact.svg', $color); @include mixins.color-svg(
'../images/icons/v3/plus/plus-compact.svg',
$color
);
& {
content: ''; content: '';
display: block; display: block;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
}
align-items: center; align-items: center;
border-radius: 100%; border-radius: 100%;
@ -25,26 +33,26 @@
justify-content: center; justify-content: center;
width: 32px; width: 32px;
@include light-theme { @include mixins.light-theme {
background: $color-gray-02; background: variables.$color-gray-02;
&::before { &::before {
@include plus-icon($color-black); @include plus-icon(variables.$color-black);
} }
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-90; background: variables.$color-gray-90;
&::before { &::before {
@include plus-icon($color-gray-15); @include plus-icon(variables.$color-gray-15);
} }
} }
} }
} }
&__block-group { &__block-group {
color: $color-accent-red; color: variables.$color-accent-red;
} }
&__unblock-group { &__unblock-group {
color: $color-accent-blue; color: variables.$color-accent-blue;
} }
&__tabs { &__tabs {
@ -54,17 +62,19 @@
} }
&__pending--info { &__pending--info {
@include font-subtitle; @include mixins.font-subtitle;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
& {
padding-block: 0; padding-block: 0;
padding-inline: 28px; padding-inline: 28px;
padding-top: 16px; padding-top: 16px;
} }
}
&-icon { &-icon {
&__button { &__button {
@ -76,8 +86,8 @@
outline: none; outline: none;
.ConversationDetails-icon__icon::after { .ConversationDetails-icon__icon::after {
@include keyboard-mode { @include mixins.keyboard-mode {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
} }
} }
@ -99,15 +109,15 @@
@mixin details-icon( @mixin details-icon(
$url, $url,
$light-color: $color-gray-75, $light-color: variables.$color-gray-75,
$dark-color: $color-gray-15 $dark-color: variables.$color-gray-15
) { ) {
@include light-theme { @include mixins.light-theme {
@include color-svg($url, $light-color); @include mixins.color-svg($url, $light-color);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($url, $dark-color); @include mixins.color-svg($url, $dark-color);
} }
} }
@ -205,12 +215,12 @@
&--down { &--down {
border-radius: 18px; border-radius: 18px;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-02; background-color: variables.$color-gray-02;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-90; background-color: variables.$color-gray-90;
} }
&::after { &::after {
@ -232,8 +242,8 @@
&::after { &::after {
@include details-icon( @include details-icon(
'../images/icons/v3/block/block.svg', '../images/icons/v3/block/block.svg',
$color-accent-red, variables.$color-accent-red,
$color-accent-red variables.$color-accent-red
); );
} }
} }
@ -241,8 +251,8 @@
&::after { &::after {
@include details-icon( @include details-icon(
'../images/icons/v3/block/block.svg', '../images/icons/v3/block/block.svg',
$color-accent-blue, variables.$color-accent-blue,
$color-accent-blue variables.$color-accent-blue
); );
} }
} }
@ -294,11 +304,11 @@
border: none; border: none;
padding: 0; padding: 0;
@include light-theme { @include mixins.light-theme {
color: $color-gray-95; color: variables.$color-gray-95;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
} }
@ -314,19 +324,19 @@
padding-inline: 24px; padding-inline: 24px;
user-select: none; user-select: none;
width: 100%; width: 100%;
@include font-body-2; @include mixins.font-body-2;
&--button { &--button {
color: inherit; color: inherit;
background: none; background: none;
&:hover:not(:disabled) { &:hover:not(:disabled) {
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-02; background-color: variables.$color-gray-02;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-90; background-color: variables.$color-gray-90;
} }
& .ConversationDetails-panel-row__actions { & .ConversationDetails-panel-row__actions {
@ -345,11 +355,11 @@
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
@include keyboard-focus-state($color-ultramarine); @include keyboard-focus-state(variables.$color-ultramarine);
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
@include keyboard-focus-state($color-ultramarine-light); @include keyboard-focus-state(variables.$color-ultramarine-light);
} }
} }
@ -367,18 +377,18 @@
&__info { &__info {
margin-top: 4px; margin-top: 4px;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
&__right { &__right {
position: relative; position: relative;
color: $color-gray-45; color: variables.$color-gray-45;
min-width: 143px; min-width: 143px;
} }
@ -401,19 +411,21 @@
&:not(:first-child)::before { &:not(:first-child)::before {
border-top: 1px solid transparent; border-top: 1px solid transparent;
@include light-theme { @include mixins.light-theme {
border-top-color: $color-gray-15; border-top-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-top-color: $color-gray-65; border-top-color: variables.$color-gray-65;
} }
& {
content: ''; content: '';
display: block; display: block;
margin-block: 8px; margin-block: 8px;
margin-inline: 0; margin-inline: 0;
} }
}
&--borderless { &--borderless {
&:not(:first-child)::before { &:not(:first-child)::before {
@ -434,7 +446,7 @@
} }
&__title { &__title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
} }
@ -483,29 +495,47 @@
} }
.ConversationDetails__CallHistoryGroup__ItemIcon--Audio { .ConversationDetails__CallHistoryGroup__ItemIcon--Audio {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
} }
} }
.ConversationDetails__CallHistoryGroup__ItemIcon--Video { .ConversationDetails__CallHistoryGroup__ItemIcon--Video {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
} }
} }
.ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc { .ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc {
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/link/link.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/link/link.svg',
variables.$color-gray-15
);
} }
} }
@ -518,40 +548,48 @@
} }
.ConversationDetails--nickname-actions { .ConversationDetails--nickname-actions {
@include button-reset; @include mixins.button-reset;
& {
width: 32px; width: 32px;
height: 32px; height: 32px;
}
&::before { &::before {
display: inline-block; display: inline-block;
content: ''; content: '';
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-down.svg', '../images/icons/v3/chevron/chevron-down.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-down.svg', '../images/icons/v3/chevron/chevron-down.svg',
$color-white variables.$color-white
); );
} }
} }
} }
.ConversationDetails--nickname-actions-label { .ConversationDetails--nickname-actions-label {
@include sr-only; @include mixins.sr-only;
} }
.ConversationDetails--nickname-actions--delete { .ConversationDetails--nickname-actions--delete {
width: 16px; width: 16px;
height: 16px; height: 16px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/trash/trash.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white); @include mixins.color-svg(
'../images/icons/v3/trash/trash.svg',
variables.$color-white
);
} }
} }

37
stylesheets/components/ConversationDetailsHeader.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationDetailsHeader { .ConversationDetailsHeader {
align-items: center; align-items: center;
display: flex; display: flex;
@ -14,12 +17,14 @@
&__edit-button, &__edit-button,
&__about-button { &__about-button {
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
} }
}
&__title { &__title {
@include font-title-1; @include mixins.font-title-1;
font-weight: 400; font-weight: 400;
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 12px; padding-top: 12px;
@ -33,13 +38,13 @@
} }
&__subtitle { &__subtitle {
@include font-body-1; @include mixins.font-body-1;
color: $color-gray-60; color: variables.$color-gray-60;
justify-content: center; justify-content: center;
padding-bottom: 6px; padding-bottom: 6px;
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
&__about { &__about {
@ -64,11 +69,11 @@
transition: opacity 100ms ease-out; transition: opacity 100ms ease-out;
width: $size; width: $size;
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-gray-60); @include mixins.color-svg($icon, variables.$color-gray-60);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-25); @include mixins.color-svg($icon, variables.$color-gray-25);
} }
} }
} }
@ -86,16 +91,16 @@
position: relative; position: relative;
inset-block-start: 2px; inset-block-start: 2px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
} }

126
stylesheets/components/ConversationHeader.scss
View file

@ -1,6 +1,10 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.module-ConversationHeader { .module-ConversationHeader {
@mixin icon-element($icon, $margin-right: 4px) { @mixin icon-element($icon, $margin-right: 4px) {
display: flex; display: flex;
@ -17,11 +21,11 @@
display: block; display: block;
margin-inline-end: $margin-right; margin-inline-end: $margin-right;
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-gray-60); @include mixins.color-svg($icon, variables.$color-gray-60);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-25); @include mixins.color-svg($icon, variables.$color-gray-25);
} }
} }
} }
@ -32,7 +36,7 @@
--button-spacing: 4px; --button-spacing: 4px;
} }
@include draggable-region; @include mixins.draggable-region;
// In Electron v23+, clicking on a `drag` region in an unfocused window may not // In Electron v23+, clicking on a `drag` region in an unfocused window may not
// propagate clicks to no-drag elements that have a higher CSS order; this avoids that // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
// scenario for interactive elements (e.g. IncomingCallBar) which overlap the // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@ -45,15 +49,15 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: calc(#{$header-height} + var(--title-bar-drag-area-height)); height: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
@include light-theme { @include mixins.light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-02; color: variables.$color-gray-02;
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
&__header { &__header {
@ -70,7 +74,8 @@
transition: margin-inline-end 200ms ease-out; transition: margin-inline-end 200ms ease-out;
&--clickable { &--clickable {
@include button-reset; @include mixins.button-reset;
& {
flex: 1; flex: 1;
border-radius: 4px; border-radius: 4px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@ -79,15 +84,16 @@
margin-inline: 4px var(--button-spacing); margin-inline: 4px var(--button-spacing);
padding: $padding; padding: $padding;
padding-inline-start: 0; padding-inline-start: 0;
}
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
&:focus { &:focus {
color: $color-ultramarine-light; color: variables.$color-ultramarine-light;
} }
} }
} }
@ -105,7 +111,7 @@
min-width: 0; min-width: 0;
&__title { &__title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
display: flex; display: flex;
align-items: center; align-items: center;
@ -121,19 +127,21 @@
&__subtitle { &__subtitle {
display: flex; display: flex;
@include font-body-2; @include mixins.font-body-2;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
&__expiration { &__expiration {
@include icon-element('../images/icons/v3/timer/timer-compact.svg'); @include icon-element('../images/icons/v3/timer/timer-compact.svg');
& {
margin-inline-end: 12px; margin-inline-end: 12px;
} }
}
&__verified { &__verified {
@include icon-element( @include icon-element(
@ -148,7 +156,8 @@
$icon-size: 32px; $icon-size: 32px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@include button-reset; @include mixins.button-reset;
& {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 4px; border-radius: 4px;
@ -163,6 +172,7 @@
opacity 200ms ease-out, opacity 200ms ease-out,
background 100ms ease-out; background 100ms ease-out;
width: $icon-size; width: $icon-size;
}
&:disabled { &:disabled {
cursor: default; cursor: default;
@ -174,50 +184,50 @@
} }
&--in-another-call { &--in-another-call {
@include light-theme { @include mixins.light-theme {
opacity: 0.5; opacity: 0.5;
} }
@include dark-theme { @include mixins.dark-theme {
opacity: 0.4; opacity: 0.4;
} }
} }
&:not(:disabled) { &:not(:disabled) {
@include light-theme { @include mixins.light-theme {
&:hover { &:hover {
background: $color-gray-02; background: variables.$color-gray-02;
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background: $color-gray-02; background: variables.$color-gray-02;
} }
} }
&:active { &:active {
background: $color-gray-05; background: variables.$color-gray-05;
} }
} }
@include dark-theme { @include mixins.dark-theme {
&:hover { &:hover {
background: $color-gray-80; background: variables.$color-gray-80;
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background: $color-gray-02; background: variables.$color-gray-02;
} }
} }
&:active { &:active {
background: $color-gray-75; background: variables.$color-gray-75;
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
} }
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
&:focus { &:focus {
border-color: $color-ultramarine-light; border-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -229,20 +239,20 @@
width: $size; width: $size;
height: $size; height: $size;
@include light-theme { @include mixins.light-theme {
@include color-svg($icon, $color-gray-75); @include mixins.color-svg($icon, variables.$color-gray-75);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@include color-svg($icon, $color-gray-90); @include mixins.color-svg($icon, variables.$color-gray-90);
} }
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg($icon, $color-gray-15); @include mixins.color-svg($icon, variables.$color-gray-15);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@include color-svg($icon, $color-gray-02); @include mixins.color-svg($icon, variables.$color-gray-02);
} }
} }
} }
@ -262,17 +272,19 @@
&--more { &--more {
@include normal-button('../images/icons/v3/more/more.svg', 20px); @include normal-button('../images/icons/v3/more/more.svg', 20px);
& {
margin-inline-end: 16px; margin-inline-end: 16px;
} }
}
&--join-call { &--join-call {
$background: $color-accent-green; $background: variables.$color-accent-green;
@include font-body-1; @include mixins.font-body-1;
@include rounded-corners; @include mixins.rounded-corners;
align-items: center; align-items: center;
background-color: $background; background-color: $background;
color: $color-white; color: variables.$color-white;
display: flex; display: flex;
outline: none; outline: none;
overflow: hidden; overflow: hidden;
@ -287,10 +299,11 @@
&:before { &:before {
$icon-size: 16px; $icon-size: 16px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-compact-fill.svg', '../images/icons/v3/video/video-compact-fill.svg',
$color-white variables.$color-white
); );
& {
content: ''; content: '';
display: block; display: block;
height: $icon-size; height: $icon-size;
@ -298,18 +311,19 @@
min-width: $icon-size; min-width: $icon-size;
width: $icon-size; width: $icon-size;
} }
}
&:not(:disabled) { &:not(:disabled) {
// Override hover/focus/active state coming from __button above. // Override hover/focus/active state coming from __button above.
&:hover, &:hover,
&:active { &:active {
@include any-theme { @include mixins.any-theme {
background-color: darken($background, 16%); background-color: color.adjust($background, $lightness: -16%);
} }
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background-color: darken($background, 16%); background-color: color.adjust($background, $lightness: -16%);
} }
} }
} }

116
stylesheets/components/ConversationHero.scss
View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-conversation-hero { .module-conversation-hero {
padding-block: 32px 28px; padding-block: 32px 28px;
padding-inline: 0; padding-inline: 0;
@ -11,12 +14,14 @@
} }
&__title { &__title {
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
} }
}
&__title span { &__title span {
@include font-title-1; @include mixins.font-title-1;
font-weight: 400; font-weight: 400;
} }
@ -29,16 +34,16 @@
position: relative; position: relative;
inset-block-start: 2px; inset-block-start: 2px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-90 variables.$color-gray-90
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg', '../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
} }
@ -48,47 +53,47 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include font-title-2; @include mixins.font-title-2;
margin-bottom: 2px; margin-bottom: 2px;
margin-top: 0; margin-top: 0;
@include light-theme { @include mixins.light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
} }
&__with { &__with {
@include font-body-2; @include mixins.font-body-2;
margin-block: 0; margin-block: 0;
margin-inline: auto; margin-inline: auto;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 500px; max-width: 500px;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
&__note-to-self { &__note-to-self {
@include font-body-2; @include mixins.font-body-2;
padding-block: 0; padding-block: 0;
padding-inline: 16px; padding-inline: 16px;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -97,11 +102,11 @@
padding-block: 6px; padding-block: 6px;
padding-inline: 14px; padding-inline: 14px;
margin-top: 12px; margin-top: 12px;
@include font-subtitle; @include mixins.font-subtitle;
} }
&__membership { &__membership {
@include font-body-2; @include mixins.font-body-2;
user-select: none; user-select: none;
max-width: 255px; max-width: 255px;
@ -113,19 +118,19 @@
border-style: solid; border-style: solid;
border-width: 1.5px; border-width: 1.5px;
@include light-theme() { @include mixins.light-theme() {
border-color: $color-gray-05; border-color: variables.$color-gray-05;
} }
@include dark-theme() { @include mixins.dark-theme() {
border-color: $color-gray-80; border-color: variables.$color-gray-80;
} }
@include light-theme { @include mixins.light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-02; color: variables.$color-gray-02;
} }
&__chevron { &__chevron {
@ -135,14 +140,17 @@
vertical-align: text-top; vertical-align: text-top;
margin-inline-end: 8px; margin-inline-end: 8px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/group/group.svg', $color-black); @include mixins.color-svg(
'../images/icons/v3/group/group.svg',
variables.$color-black
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/group/group.svg', '../images/icons/v3/group/group.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
} }
@ -163,30 +171,32 @@
width: 18px; width: 18px;
vertical-align: middle; vertical-align: middle;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/info/info.svg', '../images/icons/v3/info/info.svg',
$color-gray-90 variables.$color-gray-90
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/info/info.svg', '../images/icons/v3/info/info.svg',
$color-gray-02 variables.$color-gray-02
); );
} }
} }
&__learn-more { &__learn-more {
@include button-reset(); @include mixins.button-reset();
& {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
}
&__linkNotification { &__linkNotification {
@include font-body-2; @include mixins.font-body-2;
margin-top: 12px; margin-top: 12px;
text-align: center; text-align: center;
@ -200,11 +210,17 @@
vertical-align: middle; vertical-align: middle;
width: 16px; width: 16px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/info/info.svg', $color-gray-60); @include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-gray-60
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/info/info.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-gray-25
);
} }
} }
} }

59
stylesheets/components/ConversationPanel.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationPanel { .ConversationPanel {
height: 100%; height: 100%;
inset-inline-start: 0; inset-inline-start: 0;
@ -8,18 +11,20 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: $z-index-above-base; z-index: variables.$z-index-above-base;
@include light-theme() { @include mixins.light-theme() {
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme() { @include mixins.dark-theme() {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
&__body { &__body {
margin-top: calc(#{$header-height} + var(--title-bar-drag-area-height)); margin-top: calc(
#{variables.$header-height} + var(--title-bar-drag-area-height)
);
padding-inline: 24px; padding-inline: 24px;
} }
@ -27,19 +32,21 @@
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: calc(#{$header-height} + var(--title-bar-drag-area-height)); height: calc(
#{variables.$header-height} + var(--title-bar-drag-area-height)
);
padding-top: var(--title-bar-drag-area-height); padding-top: var(--title-bar-drag-area-height);
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: $z-index-base; z-index: variables.$z-index-base;
@include light-theme { @include mixins.light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-02; color: variables.$color-gray-02;
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
&__info { &__info {
@ -48,7 +55,7 @@
min-width: 0; min-width: 0;
&__title { &__title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
display: flex; display: flex;
align-items: center; align-items: center;
@ -79,27 +86,27 @@
cursor: default; cursor: default;
} }
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg', '../images/icons/v3/chevron/chevron-left.svg',
$color-gray-90 variables.$color-gray-90
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg', '../images/icons/v3/chevron/chevron-left.svg',
$color-gray-02 variables.$color-gray-02
); );
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
&:focus { &:focus {
background-color: $color-ultramarine-light; background-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -111,7 +118,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: $z-index-above-base; z-index: variables.$z-index-above-base;
} }
&__hidden { &__hidden {

21
stylesheets/components/ConversationView.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationView { .ConversationView {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,20 +12,22 @@
&__pane { &__pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height)); height: calc(
100% - #{variables.$header-height} - var(--title-bar-drag-area-height)
);
inset-inline-start: 0; inset-inline-start: 0;
overflow-y: overlay; overflow-y: overlay;
position: absolute; position: absolute;
top: calc(#{$header-height} + var(--title-bar-drag-area-height)); top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
width: 100%; width: 100%;
z-index: $z-index-base; z-index: variables.$z-index-base;
@include light-theme() { @include mixins.light-theme() {
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme() { @include mixins.dark-theme() {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
} }
@ -35,6 +40,7 @@
z-index: 0; z-index: 0;
} }
& {
-webkit-padding-start: 0px; -webkit-padding-start: 0px;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -45,6 +51,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
} }
}
&__composition-area { &__composition-area {
position: relative; position: relative;

55
stylesheets/components/CountryCodeSelect.scss
View file

@ -1,27 +1,32 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CountryCodeSelect { .CountryCodeSelect {
@include button-reset(); @include mixins.button-reset();
& {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 12px; gap: 12px;
align-items: center; align-items: center;
@include font-body-2; @include mixins.font-body-2;
border: solid 1px transparent; border: solid 1px transparent;
border-radius: 8px; border-radius: 8px;
height: 28px; height: 28px;
padding-inline: 12px; padding-inline: 12px;
width: 100%; width: 100%;
@include light-theme {
background-color: $color-black-alpha-06;
color: $color-gray-90;
} }
@include dark-theme {
background-color: $color-white-alpha-12; @include mixins.light-theme {
color: $color-gray-05; background-color: variables.$color-black-alpha-06;
color: variables.$color-gray-90;
}
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-12;
color: variables.$color-gray-05;
} }
&__text { &__text {
@ -33,17 +38,17 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/dropdown/dropdown-compact.svg', '../images/icons/v3/dropdown/dropdown-compact.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/dropdown/dropdown-compact.svg', '../images/icons/v3/dropdown/dropdown-compact.svg',
$color-gray-05 variables.$color-gray-05
); );
} }
} }
@ -72,8 +77,9 @@
} }
&__CountryButton { &__CountryButton {
@include button-reset(); @include mixins.button-reset();
@include font-body-1; & {
@include mixins.font-body-1;
width: 100%; width: 100%;
@ -84,21 +90,22 @@
height: 40px; height: 40px;
padding-inline: 14px; padding-inline: 14px;
border-radius: 8px; border-radius: 8px;
}
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
@include light-theme { @include mixins.light-theme {
background-color: $color-black-alpha-06; background-color: variables.$color-black-alpha-06;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-white-alpha-12; background-color: variables.$color-white-alpha-12;
} }
} }
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine; box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
} }
} }
} }

11
stylesheets/components/CustomColorEditor.scss
View file

@ -1,10 +1,13 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CustomColorEditor { .CustomColorEditor {
&__messages { &__messages {
border-radius: 8px; border-radius: 8px;
border: 1px solid $color-gray-15; border: 1px solid variables.$color-gray-15;
padding-block: 27px; padding-block: 27px;
padding-inline: 0; padding-inline: 0;
margin-top: 16px; margin-top: 16px;
@ -16,10 +19,12 @@
} }
&__gradient-knob { &__gradient-knob {
@include color-bubble(42px); @include mixins.color-bubble(42px);
& {
cursor: move; cursor: move;
position: absolute; position: absolute;
} }
}
&__slider-container { &__slider-container {
margin-top: 26px; margin-top: 26px;
@ -45,7 +50,7 @@
&__hue-slider__handle { &__hue-slider__handle {
&:focus { &:focus {
outline: none; outline: none;
border: 2px solid $color-white; border: 2px solid variables.$color-white;
border-radius: 8px; border-radius: 8px;
} }
} }

15
stylesheets/components/CustomizingPreferredReactionsModal.scss
View file

@ -1,13 +1,16 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CustomizingPreferredReactionsModal { .module-CustomizingPreferredReactionsModal {
&__overlay-container { &__overlay-container {
z-index: $z-index-above-context-menu; z-index: variables.$z-index-above-context-menu;
} }
&__small-emoji-picker-wrapper { &__small-emoji-picker-wrapper {
@include font-subtitle; @include mixins.font-subtitle;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,11 +20,11 @@
text-align: center; text-align: center;
user-select: none; user-select: none;
@include light-theme { @include mixins.light-theme {
color: $color-gray-45; color: variables.$color-gray-45;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
.module-ReactionPickerPicker { .module-ReactionPickerPicker {

37
stylesheets/components/DebugLogWindow.scss
View file

@ -1,6 +1,9 @@
// Copyright 2016 Signal Messenger, LLC // Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.DebugLogWindow { .DebugLogWindow {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -22,15 +25,15 @@
overflow-y: scroll; overflow-y: scroll;
max-height: 100%; max-height: 100%;
border: 1px solid $color-gray-45; border: 1px solid variables.$color-gray-45;
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-90; background-color: variables.$color-gray-90;
color: $color-gray-02; color: variables.$color-gray-02;
} }
&__text { &__text {
font-family: $monospace; font-family: variables.$monospace;
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
user-select: none; user-select: none;
@ -39,16 +42,16 @@
} }
&__title { &__title {
@include font-title-2; @include mixins.font-title-2;
} }
&__subtitle { &__subtitle {
@include font-body-2; @include mixins.font-body-2;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -70,13 +73,13 @@
padding-inline: 10px; padding-inline: 10px;
width: 100%; width: 100%;
@include light-theme { @include mixins.light-theme {
border: solid 1px $color-gray-25; border: solid 1px variables.$color-gray-25;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-90; background-color: variables.$color-gray-90;
border: solid 1px $color-gray-45; border: solid 1px variables.$color-gray-45;
color: $color-gray-02; color: variables.$color-gray-02;
} }
} }
} }

13
stylesheets/components/DisappearingTimerSelect.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-disappearing-timer-select { .module-disappearing-timer-select {
position: relative; position: relative;
@ -10,14 +13,14 @@
margin-top: 4px; margin-top: 4px;
padding-inline-start: 14px; padding-inline-start: 14px;
@include font-subtitle; @include mixins.font-subtitle;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
} }

9
stylesheets/components/EditConversationAttributesModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-EditConversationAttributesModal { .module-EditConversationAttributesModal {
.module-AvatarInput { .module-AvatarInput {
margin-block: 24px; margin-block: 24px;
@ -8,14 +11,14 @@
} }
&__error-message { &__error-message {
@include font-body-1; @include mixins.font-body-1;
margin-block: 16px; margin-block: 16px;
margin-inline: 0; margin-inline: 0;
} }
&__description-warning { &__description-warning {
@include font-subtitle; @include mixins.font-subtitle;
color: $color-gray-45; color: variables.$color-gray-45;
margin-block: 0; margin-block: 0;
margin-inline: 16px; margin-inline: 16px;
} }

21
stylesheets/components/EditHistoryMessagesModal.scss
View file

@ -1,37 +1,40 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditHistoryMessagesModal { .EditHistoryMessagesModal {
&__divider { &__divider {
border-bottom: 0; border-bottom: 0;
border-style: solid; border-style: solid;
margin-block: 24px; margin-block: 24px;
@include light-theme { @include mixins.light-theme {
border-color: $color-gray-15; border-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
} }
} }
&__title { &__title {
@include font-body-1-bold; @include mixins.font-body-1-bold;
} }
.module-message { .module-message {
padding-inline: 0; padding-inline: 0;
&__link-preview__content { &__link-preview__content {
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-75; background-color: variables.$color-gray-75;
} }
} }
&__container--incoming { &__container--incoming {
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
} }
} }

15
stylesheets/components/EditNicknameAndNoteModal.scss
View file

@ -1,18 +1,21 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditNicknameAndNoteModal__width-container { .EditNicknameAndNoteModal__width-container {
max-width: 360px; max-width: 360px;
} }
.EditNicknameAndNoteModal__Description { .EditNicknameAndNoteModal__Description {
margin-block: 12px 24px; margin-block: 12px 24px;
@include font-body-2; @include mixins.font-body-2;
@include light-theme { @include mixins.light-theme {
color: $color-gray-75; color: variables.$color-gray-75;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -23,5 +26,5 @@
} }
.EditNicknameAndNoteModal__Label { .EditNicknameAndNoteModal__Label {
@include sr-only; @include mixins.sr-only;
} }

63
stylesheets/components/EditUsernameModalBody.scss
View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditUsernameModalBody { .EditUsernameModalBody {
&__header { &__header {
display: flex; display: flex;
@ -19,12 +22,12 @@
margin-top: 21px; margin-top: 21px;
margin-bottom: 16px; margin-bottom: 16px;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-04; background-color: variables.$color-gray-04;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
&::after { &::after {
@ -33,12 +36,18 @@
height: 36px; height: 36px;
content: ''; content: '';
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75); @include mixins.color-svg(
'../images/icons/v3/at/at.svg',
variables.$color-gray-75
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/at/at.svg',
variables.$color-gray-15
);
} }
} }
} }
@ -54,12 +63,12 @@
margin-block: 0; margin-block: 0;
margin-inline: 12px; margin-inline: 12px;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-20; background-color: variables.$color-gray-20;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-45; background-color: variables.$color-gray-45;
} }
} }
@ -68,27 +77,27 @@
} }
&__error { &__error {
@include font-body-2; @include mixins.font-body-2;
margin-block: 8px 12px; margin-block: 8px 12px;
margin-inline: 6px; margin-inline: 6px;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
color: $color-accent-red; color: variables.$color-accent-red;
} }
&__info { &__info {
@include font-body-2; @include mixins.font-body-2;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
margin-block: 12px; margin-block: 12px;
margin-inline: 6px; margin-inline: 6px;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
// To account for missing error section: 8px top margin, 17px line height, // To account for missing error section: 8px top margin, 17px line height,
@ -99,8 +108,10 @@
} }
&__learn-more-button { &__learn-more-button {
@include button-reset; @include mixins.button-reset;
color: $color-accent-blue; & {
color: variables.$color-accent-blue;
}
} }
&__learn-more { &__learn-more {
@ -118,17 +129,19 @@
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
content: ''; content: '';
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-75; background-color: variables.$color-gray-75;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
& {
-webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center; -webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
} }
} }
}
&__input__container.Input__container { &__input__container.Input__container {
/** /**

19
stylesheets/components/ForwardMessageModal.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ForwardMessageModal { .module-ForwardMessageModal {
flex-direction: column; flex-direction: column;
margin-block: 0; margin-block: 0;
@ -14,12 +17,12 @@
} }
&--link-preview { &--link-preview {
border-bottom: 1px solid $color-gray-15; border-bottom: 1px solid variables.$color-gray-15;
padding-block: 12px; padding-block: 12px;
padding-inline: 16px; padding-inline: 16px;
@include dark-theme() { @include mixins.dark-theme() {
border-color: $color-gray-60; border-color: variables.$color-gray-60;
} }
} }
@ -62,18 +65,18 @@
&::after { &::after {
height: 24px; height: 24px;
width: 24px; width: 24px;
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/arrow/arrow-right.svg', '../images/icons/v3/arrow/arrow-right.svg',
$color-white variables.$color-white
); );
} }
} }
&--forward { &--forward {
&::after { &::after {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/send/send-fill.svg', '../images/icons/v3/send/send-fill.svg',
$color-white variables.$color-white
); );
} }
} }
@ -86,7 +89,7 @@
} }
&__footer { &__footer {
@include font-body-2; @include mixins.font-body-2;
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;

27
stylesheets/components/GradientDial.scss
View file

@ -1,10 +1,13 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.GradientDial { .GradientDial {
&__container { &__container {
height: 100%; height: 100%;
@include position-absolute-center; @include mixins.position-absolute-center;
width: 100%; width: 100%;
} }
@ -17,8 +20,8 @@
} }
&--node { &--node {
background: $color-white; background: variables.$color-white;
border: 1px solid $color-black-alpha-20; border: 1px solid variables.$color-black-alpha-20;
height: 100%; height: 100%;
height: 1000px; height: 1000px;
inset-inline-start: 50%; inset-inline-start: 50%;
@ -30,20 +33,22 @@
} }
&__knob { &__knob {
@include color-bubble(42px); @include mixins.color-bubble(42px);
box-shadow: 0 0 4px $color-black-alpha-20; & {
box-shadow: 0 0 4px variables.$color-black-alpha-20;
cursor: move; cursor: move;
margin-inline-start: -20px; margin-inline-start: -20px;
margin-top: -20px; margin-top: -20px;
padding: 2px; padding: 2px;
position: absolute; position: absolute;
z-index: $z-index-base; z-index: variables.$z-index-base;
}
&--selected { &--selected {
border-color: $color-gray-75; border-color: variables.$color-gray-75;
@include dark-theme { @include mixins.dark-theme {
border-color: $color-white; border-color: variables.$color-white;
} }
} }
@ -51,9 +56,9 @@
outline: none; outline: none;
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
outline: none; outline: none;
} }
} }

15
stylesheets/components/GroupDescription.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.GroupDescription { .GroupDescription {
&__text { &__text {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -10,18 +13,20 @@
user-select: text; user-select: text;
a { a {
@include light-theme { @include mixins.light-theme {
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-02; color: variables.$color-gray-02;
} }
} }
} }
&__read-more { &__read-more {
@include button-reset(); @include mixins.button-reset();
& {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
} }
}
} }

59
stylesheets/components/GroupDialog.scss
View file

@ -1,8 +1,12 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-GroupDialog { .module-GroupDialog {
@include popper-shadow(); @include mixins.popper-shadow();
& {
border-radius: 8px; border-radius: 8px;
margin-block: 0; margin-block: 0;
margin-inline: auto; margin-inline: auto;
@ -13,47 +17,56 @@
width: 95%; width: 95%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
} }
@include dark-theme() { @include mixins.light-theme() {
background: $color-gray-95; background: variables.$color-white;
color: $color-gray-05; color: variables.$color-gray-90;
}
@include mixins.dark-theme() {
background: variables.$color-gray-95;
color: variables.$color-gray-05;
} }
&__close-button { &__close-button {
@include button-reset; @include mixins.button-reset;
& {
position: absolute; position: absolute;
inset-inline-end: 12px; inset-inline-end: 12px;
top: 12px; top: 12px;
height: 24px; height: 24px;
width: 24px; width: 24px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
} }
@include dark-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-75
);
}
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-15
);
} }
&:focus { &:focus {
@include keyboard-mode { @include mixins.keyboard-mode {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
} }
@include dark-keyboard-mode { @include mixins.dark-keyboard-mode {
background-color: $color-ultramarine-light; background-color: variables.$color-ultramarine-light;
} }
} }
} }
&__title { &__title {
@include font-title-2; @include mixins.font-title-2;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -84,11 +97,11 @@
top: 4px; top: 4px;
width: 4px; width: 4px;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
} }
} }

9
stylesheets/components/GroupInput.scss
View file

@ -1,8 +1,11 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-GroupInput { .module-GroupInput {
@include normal-input; @include mixins.normal-input;
&__description { &__description {
resize: none; resize: none;
@ -13,9 +16,9 @@
} }
&--remaining { &--remaining {
@include font-subtitle; @include mixins.font-subtitle;
bottom: 0; bottom: 0;
color: $color-gray-45; color: variables.$color-gray-45;
margin: 12px; margin: 12px;
position: absolute; position: absolute;
inset-inline-end: 0; inset-inline-end: 0;

4
stylesheets/components/HueSlider.scss
View file

@ -1,6 +1,8 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.HueSlider { .HueSlider {
&.Slider { &.Slider {
background-image: linear-gradient( background-image: linear-gradient(
@ -24,7 +26,7 @@
&__handle { &__handle {
&.Slider__handle { &.Slider__handle {
border: 7px solid $color-white; border: 7px solid variables.$color-white;
margin-top: -7px; margin-top: -7px;
margin-inline-start: -11px; margin-inline-start: -11px;
height: 22px; height: 22px;

4
stylesheets/components/InAnotherCallTooltip.scss
View file

@ -1,6 +1,8 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.InAnotherCallTooltip { .InAnotherCallTooltip {
@include tooltip; @include mixins.tooltip;
} }

32
stylesheets/components/Inbox.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Inbox { .Inbox {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -25,12 +28,12 @@
} }
.__conversation { .__conversation {
@include light-theme { @include mixins.light-theme {
background-color: $color-white; background-color: variables.$color-white;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-95; background-color: variables.$color-gray-95;
} }
} }
} }
@ -48,11 +51,11 @@
margin-block: 24px; margin-block: 24px;
position: relative; position: relative;
@include light-theme() { @include mixins.light-theme() {
--Inbox__logo__bg: #{$color-ultramarine-logo}; --Inbox__logo__bg: #{variables.$color-ultramarine-logo};
} }
@include dark-theme() { @include mixins.dark-theme() {
--Inbox__logo__bg: #{$color-white}; --Inbox__logo__bg: #{variables.$color-white};
} }
.Inbox__logo__part { .Inbox__logo__part {
@ -62,9 +65,14 @@
} }
.Inbox__logo__part--base { .Inbox__logo__part--base {
@include color-svg('../images/logo-parts/base.svg', var(--Inbox__logo__bg)); @include mixins.color-svg(
'../images/logo-parts/base.svg',
var(--Inbox__logo__bg)
);
& {
z-index: 1; z-index: 1;
} }
}
.Inbox__logo__part--segment { .Inbox__logo__part--segment {
opacity: 0; opacity: 0;
@ -79,13 +87,15 @@
@for $i from 1 through 16 { @for $i from 1 through 16 {
.Inbox__logo__part--segment:nth-child(#{$i + 1}) { .Inbox__logo__part--segment:nth-child(#{$i + 1}) {
@include color-svg( @include mixins.color-svg(
'../images/logo-parts/p#{$i}.svg', '../images/logo-parts/p#{$i}.svg',
var(--Inbox__logo__bg) var(--Inbox__logo__bg)
); );
& {
transform: rotate(#{(16 - $i) * 22.5}deg); transform: rotate(#{(16 - $i) * 22.5}deg);
} }
} }
}
.Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible { .Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible {
transform: rotate(0deg); transform: rotate(0deg);
@ -96,7 +106,7 @@
.Inbox__welcome { .Inbox__welcome {
margin-block: 20px 6px; margin-block: 20px 6px;
@include font-title-medium; @include mixins.font-title-medium;
line-height: 24px; line-height: 24px;
} }

75
stylesheets/components/IncomingCallBar.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.IncomingCallBar { .IncomingCallBar {
&__container { &__container {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@ -9,14 +12,14 @@
top: 22px; top: 22px;
user-select: none; user-select: none;
width: 100%; width: 100%;
z-index: $z-index-calling; z-index: variables.$z-index-calling;
padding-inline: 1rem; padding-inline: 1rem;
} }
&__bar { &__bar {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
align-items: center; align-items: center;
background-color: $color-gray-75; background-color: variables.$color-gray-75;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
height: 70px; height: 70px;
@ -49,7 +52,7 @@
} }
&--name-header { &--name-header {
@include font-body-1-bold; @include mixins.font-body-1-bold;
color: #ffffff; color: #ffffff;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -59,7 +62,7 @@
&--message-text { &--message-text {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@include font-body-2; @include mixins.font-body-2;
color: #ffffff; color: #ffffff;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
@ -90,105 +93,113 @@
} }
&--accept-video-as-audio { &--accept-video-as-audio {
background-color: $color-gray-45; background-color: variables.$color-gray-45;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine; box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
} }
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine; box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
} }
} }
div { div {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-slash-fill.svg', '../images/icons/v3/video/video-slash-fill.svg',
$color-white variables.$color-white
); );
& {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
} }
}
&--accept-video { &--accept-video {
background-color: $color-accent-green; background-color: variables.$color-accent-green;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine; box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
} }
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine; box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
} }
} }
div { div {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/video/video-fill.svg', '../images/icons/v3/video/video-fill.svg',
$color-white variables.$color-white
); );
& {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
} }
}
&--accept-audio { &--accept-audio {
background-color: $color-accent-green; background-color: variables.$color-accent-green;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine; box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
} }
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine; box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
} }
} }
div { div {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-fill.svg', '../images/icons/v3/phone/phone-fill.svg',
$color-white variables.$color-white
); );
& {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
} }
}
&--decline { &--decline {
background-color: $color-accent-red; background-color: variables.$color-accent-red;
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine; box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
} }
} }
@include mouse-mode { @include mixins.mouse-mode {
&:hover { &:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine; box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
} }
} }
div { div {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/phone/phone-down-fill.svg', '../images/icons/v3/phone/phone-down-fill.svg',
$color-white variables.$color-white
); );
& {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
} }
} }
}
} }
@keyframes IncomingCallBar--animation { @keyframes IncomingCallBar--animation {

77
stylesheets/components/Input.scss
View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Input { .Input {
&__container { &__container {
@include font-body-1; @include mixins.font-body-1;
border-radius: 6px; border-radius: 6px;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
@ -19,40 +22,40 @@
padding-inline: 8px; padding-inline: 8px;
} }
@include light-theme { @include mixins.light-theme {
background: $color-white; background: variables.$color-white;
border-color: $color-gray-15; border-color: variables.$color-gray-15;
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-80; background: variables.$color-gray-80;
border-color: $color-gray-45; border-color: variables.$color-gray-45;
color: $color-gray-05; color: variables.$color-gray-05;
} }
&--disabled { &--disabled {
@include light-theme { @include mixins.light-theme {
background: $color-gray-02; background: variables.$color-gray-02;
border-color: $color-gray-05; border-color: variables.$color-gray-05;
color: $color-gray-90; color: variables.$color-gray-90;
} }
@include dark-theme { @include mixins.dark-theme {
background: $color-gray-95; background: variables.$color-gray-95;
border-color: $color-gray-60; border-color: variables.$color-gray-60;
color: $color-gray-20; color: variables.$color-gray-20;
} }
} }
&:focus-within { &:focus-within {
outline: none; outline: none;
@include light-theme { @include mixins.light-theme {
border-color: $color-ultramarine; border-color: variables.$color-ultramarine;
} }
@include dark-theme { @include mixins.dark-theme {
border-color: $color-ultramarine-light; border-color: variables.$color-ultramarine-light;
} }
} }
} }
@ -65,7 +68,7 @@
} }
&__input { &__input {
@include font-body-1; @include mixins.font-body-1;
background: inherit; background: inherit;
border: none; border: none;
@ -81,15 +84,15 @@
} }
&:placeholder { &:placeholder {
color: $color-gray-45; color: variables.$color-gray-45;
} }
@include light-theme { @include mixins.light-theme {
color: $color-black; color: variables.$color-black;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-05; color: variables.$color-gray-05;
} }
&:focus { &:focus {
@ -110,17 +113,23 @@
height: 18px; height: 18px;
width: 18px; width: 18px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-60
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
} }
} }
&__remaining-count { &__remaining-count {
@include font-subtitle; @include mixins.font-subtitle;
color: $color-gray-45; color: variables.$color-gray-45;
&--large { &--large {
position: absolute; position: absolute;
@ -131,7 +140,7 @@
} }
&--warn { &--warn {
color: $color-accent-red; color: variables.$color-accent-red;
} }
} }
} }

76
stylesheets/components/InstallScreenBackupImportStep.scss
View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC // Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenBackupImportStep { .InstallScreenBackupImportStep {
position: relative; position: relative;
display: flex; display: flex;
@ -22,7 +25,7 @@
} }
.InstallScreenBackupImportStep__title { .InstallScreenBackupImportStep__title {
@include font-title-2; @include mixins.font-title-2;
margin-block: 0 20px; margin-block: 0 20px;
} }
@ -31,41 +34,43 @@
} }
.InstallScreenBackupImportStep__progressbar-hint { .InstallScreenBackupImportStep__progressbar-hint {
@include font-caption; @include mixins.font-caption;
margin-block-end: 22px; margin-block-end: 22px;
@include light-theme { @include mixins.light-theme {
color: rgba($color-gray-60, 0.8); color: rgba(variables.$color-gray-60, 0.8);
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
.InstallScreenBackupImportStep__description { .InstallScreenBackupImportStep__description {
@include font-body-1; @include mixins.font-body-1;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
.InstallScreenBackupImportStep__cancel { .InstallScreenBackupImportStep__cancel {
@include button-reset(); @include mixins.button-reset();
@include button-focus-outline; & {
@include font-body-1-bold; @include mixins.button-focus-outline;
@include mixins.font-body-1-bold;
@include light-theme() {
color: $color-ultramarine;
} }
@include dark-theme() { @include mixins.light-theme() {
color: $color-ultramarine-light; color: variables.$color-ultramarine;
}
@include mixins.dark-theme() {
color: variables.$color-ultramarine-light;
} }
} }
@ -85,34 +90,39 @@
max-width: 336px; max-width: 336px;
&--icon::after { &--icon::after {
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/lock/lock.svg', '../images/icons/v3/lock/lock.svg',
rgba($color-gray-60, 0.8) rgba(variables.$color-gray-60, 0.8)
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/lock/lock.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/lock/lock.svg',
variables.$color-gray-25
);
} }
& {
content: ''; content: '';
display: block; display: block;
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-bottom: 4px; margin-bottom: 4px;
} }
&--description {
@include font-caption;
text-align: center;
@include light-theme {
color: rgba($color-gray-60, 0.8);
} }
@include dark-theme { &--description {
color: $color-gray-25; @include mixins.font-caption;
text-align: center;
@include mixins.light-theme {
color: rgba(variables.$color-gray-60, 0.8);
}
@include mixins.dark-theme {
color: variables.$color-gray-25;
} }
a { a {

12
stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
View file

@ -1,10 +1,14 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
.module-InstallScreenChoosingDeviceNameStep { @use '../mixins';
@include install-screen;
.module-InstallScreenChoosingDeviceNameStep {
@include mixins.install-screen;
& {
text-align: center; text-align: center;
}
&__inputs { &__inputs {
display: flex; display: flex;
@ -15,9 +19,11 @@
} }
&__input { &__input {
@include normal-input; @include mixins.normal-input;
& {
width: 90%; width: 90%;
max-width: 300px; max-width: 300px;
margin-bottom: 18px; margin-bottom: 18px;
} }
}
} }

6
stylesheets/components/InstallScreenErrorStep.scss
View file

@ -1,11 +1,15 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.module-InstallScreenErrorStep { .module-InstallScreenErrorStep {
@include install-screen; @include mixins.install-screen;
& {
flex-direction: column; flex-direction: column;
padding-inline: 2rem; padding-inline: 2rem;
text-align: center; text-align: center;
}
&__buttons { &__buttons {
margin-top: 1rem; margin-top: 1rem;

21
stylesheets/components/InstallScreenLinkInProgressStep.scss
View file

@ -1,27 +1,32 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
.module-InstallScreenLinkInProgressStep { @use '../mixins';
@include install-screen; @use '../variables';
.module-InstallScreenLinkInProgressStep {
@include mixins.install-screen;
& {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
}
h1 { h1 {
@include font-title-2; @include mixins.font-title-2;
margin-top: 18px; margin-top: 18px;
} }
h2 { h2 {
@include font-body-1; @include mixins.font-body-1;
font-weight: normal; font-weight: normal;
margin-block-start: 0; margin-block-start: 0;
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
} }

59
stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
View file

@ -1,28 +1,31 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-InstallScreenQrCodeNotScannedStep { .module-InstallScreenQrCodeNotScannedStep {
@include install-screen; @include mixins.install-screen;
&__contents { &__contents {
$base-max-width: 760px; $base-max-width: 760px;
align-items: center; align-items: center;
background: $color-white; background: variables.$color-white;
border-radius: 8px; border-radius: 8px;
color: $color-black; color: variables.$color-black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in; animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in;
position: relative; position: relative;
top: 0; top: 0;
@include light-theme { @include mixins.light-theme {
max-width: $base-max-width; max-width: $base-max-width;
padding: 22px; padding: 22px;
} }
@include dark-theme { @include mixins.dark-theme {
max-width: $base-max-width + 44px; max-width: $base-max-width + 44px;
padding: 44px; padding: 44px;
margin-top: 44px; // Avoids overlap with the Signal logo margin-top: 44px; // Avoids overlap with the Signal logo
@ -45,38 +48,42 @@
width: $size; width: $size;
&--loaded { &--loaded {
background: $color-white; background: variables.$color-white;
} }
&--load-failed { &--load-failed {
@include font-subtitle; @include mixins.font-subtitle;
border-color: $color-gray-05; border-color: variables.$color-gray-05;
border-radius: 10px; border-radius: 10px;
color: $color-gray-60; color: variables.$color-gray-60;
} }
&__link { &__link {
@include button-reset; @include mixins.button-reset;
@include font-body-2-bold; & {
@include mixins.font-body-2-bold;
display: flex; display: flex;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
color: $color-ultramarine; color: variables.$color-ultramarine;
margin-block-start: 16px; margin-block-start: 16px;
}
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/refresh/refresh-bold.svg', '../images/icons/v3/refresh/refresh-bold.svg',
$color-ultramarine variables.$color-ultramarine
); );
& {
content: ''; content: '';
display: block; display: block;
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
} }
}
&__code { &__code {
height: $size; height: $size;
@ -87,13 +94,14 @@
&__error-message { &__error-message {
text-align: center; text-align: center;
@include font-body-2; @include mixins.font-body-2;
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/error/error-circle.svg', '../images/icons/v3/error/error-circle.svg',
$color-accent-red variables.$color-accent-red
); );
& {
content: ''; content: '';
display: block; display: block;
height: 22px; height: 22px;
@ -101,16 +109,19 @@
margin-inline: auto; margin-inline: auto;
width: 22px; width: 22px;
} }
}
& {
margin-inline: 24px; margin-inline: 24px;
} }
}
&__error-message p { &__error-message p {
margin-block: 0; margin-block: 0;
} }
&__get-help { &__get-help {
@include font-body-2-bold; @include mixins.font-body-2-bold;
display: flex; display: flex;
gap: 4px; gap: 4px;
@ -118,14 +129,15 @@
margin-block-start: 16px; margin-block-start: 16px;
color: $color-ultramarine; color: variables.$color-ultramarine;
text-decoration: none; text-decoration: none;
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/open/open-compact-bold.svg', '../images/icons/v3/open/open-compact-bold.svg',
$color-ultramarine variables.$color-ultramarine
); );
& {
content: ''; content: '';
display: block; display: block;
height: 16px; height: 16px;
@ -133,9 +145,10 @@
} }
} }
} }
}
ol { ol {
@include font-body-1; @include mixins.font-body-1;
line-height: 26px; line-height: 26px;
list-style-position: inside; list-style-position: inside;
padding-inline-start: 0; padding-inline-start: 0;
@ -143,7 +156,7 @@
a { a {
// We want the right link color in dark mode. This is a no-op in light mode. // We want the right link color in dark mode. This is a no-op in light mode.
color: $color-ultramarine; color: variables.$color-ultramarine;
} }
} }

12
stylesheets/components/InstallScreenSignalLogo.scss
View file

@ -1,8 +1,11 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenSignalLogo { .InstallScreenSignalLogo {
@include font-title-1; @include mixins.font-title-1;
align-items: center; align-items: center;
display: flex; display: flex;
font-weight: bold; font-weight: bold;
@ -11,11 +14,16 @@
inset-inline-start: 32px; inset-inline-start: 32px;
&::before { &::before {
@include color-svg('../images/signal-logo.svg', $color-ultramarine-logo); @include mixins.color-svg(
'../images/signal-logo.svg',
variables.$color-ultramarine-logo
);
& {
content: ''; content: '';
display: block; display: block;
height: 32px; height: 32px;
margin-inline-end: 6px; margin-inline-end: 6px;
width: 32px; width: 32px;
} }
}
} }

15
stylesheets/components/InstallScreenUpdateDialog.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenUpdateDialog { .InstallScreenUpdateDialog {
&__download-size { &__download-size {
font-weight: 400; font-weight: 400;
@ -8,12 +11,13 @@
&__progress { &__progress {
&--container { &--container {
@include light-theme() { @include mixins.light-theme() {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
} }
@include dark-theme() { @include mixins.dark-theme() {
background-color: $color-gray-65; background-color: variables.$color-gray-65;
} }
& {
border-radius: 2px; border-radius: 2px;
height: 4px; height: 4px;
overflow: hidden; overflow: hidden;
@ -21,9 +25,10 @@
margin-block: 16px; margin-block: 16px;
margin-inline: 0; margin-inline: 0;
} }
}
&--bar { &--bar {
background-color: $color-ultramarine; background-color: variables.$color-ultramarine;
border-radius: 2px; border-radius: 2px;
display: block; display: block;
height: 100%; height: 100%;

37
stylesheets/components/LeftPaneBanner.scss
View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC // Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.LeftPaneBanner { .LeftPaneBanner {
margin-block: 4px 8px; margin-block: 4px 8px;
margin-inline: 10px; margin-inline: 10px;
@ -9,16 +12,18 @@
padding-inline-end: 7px; padding-inline-end: 7px;
border-radius: 8px; border-radius: 8px;
@include light-theme { @include mixins.light-theme {
background-color: $color-gray-15; background-color: variables.$color-gray-15;
color: $color-gray-75; color: variables.$color-gray-75;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-gray-75; background-color: variables.$color-gray-75;
color: $color-gray-15; color: variables.$color-gray-15;
} }
@include font-body-2; & {
@include mixins.font-body-2;
}
&__content { &__content {
margin-bottom: 8px; margin-bottom: 8px;
@ -30,15 +35,17 @@
margin-inline-end: 9px; margin-inline-end: 9px;
&__action-button { &__action-button {
@include button-reset; @include mixins.button-reset;
@include button-focus-outline; @include mixins.button-focus-outline;
@include font-body-1-bold; & {
@include mixins.font-body-1-bold;
@include light-theme {
color: $color-gray-90;
} }
@include dark-theme {
color: $color-gray-05; @include mixins.light-theme {
color: variables.$color-gray-90;
}
@include mixins.dark-theme {
color: variables.$color-gray-05;
} }
} }
} }

69
stylesheets/components/LeftPaneDialog.scss
View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
@keyframes progress-animation { @keyframes progress-animation {
0% { 0% {
background-position: 100%; background-position: 100%;
@ -11,12 +14,12 @@
} }
.LeftPaneDialog { .LeftPaneDialog {
$default-background-color: $color-ultramarine; $default-background-color: variables.$color-ultramarine;
$default-text-color: $color-white; $default-text-color: variables.$color-white;
$error-background-color: $color-accent-red; $error-background-color: variables.$color-accent-red;
$error-text-color: $default-text-color; $error-text-color: $default-text-color;
$warning-background-color: $color-accent-yellow; $warning-background-color: variables.$color-accent-yellow;
$warning-text-color: $color-black; $warning-text-color: variables.$color-black;
align-items: center; align-items: center;
background: $default-background-color; background: $default-background-color;
@ -39,8 +42,10 @@
} }
&__retry { &__retry {
@include button-reset; @include mixins.button-reset;
@include font-body-1-bold; & {
@include mixins.font-body-1-bold;
}
} }
&--clickable { &--clickable {
@ -64,16 +69,16 @@
&__spinner { &__spinner {
&__arc { &__arc {
background-color: $color-black; background-color: variables.$color-black;
// Needed for specificity // Needed for specificity
@include dark-theme { @include mixins.dark-theme {
background-color: $color-black; background-color: variables.$color-black;
} }
} }
&__circle { &__circle {
background-color: $color-accent-yellow; background-color: variables.$color-accent-yellow;
} }
} }
@ -81,7 +86,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-inline-end: 18px; margin-inline-end: 18px;
background-color: $color-white; background-color: variables.$color-white;
-webkit-mask-size: contain; -webkit-mask-size: contain;
@media (forced-colors: active) { @media (forced-colors: active) {
@ -115,22 +120,26 @@
} }
&__action-text { &__action-text {
@include button-reset; @include mixins.button-reset;
& {
text-decoration: none; text-decoration: none;
color: $color-white-alpha-80; color: variables.$color-white-alpha-80;
}
} }
&__close-button { &__close-button {
@include button-reset; @include mixins.button-reset;
& {
border-radius: 4px; border-radius: 4px;
float: inline-end; float: inline-end;
height: 20px; height: 20px;
width: 20px; width: 20px;
}
&::before { &::before {
-webkit-mask: url('../images/icons/v3/x/x.svg') no-repeat center; -webkit-mask: url('../images/icons/v3/x/x.svg') no-repeat center;
background-color: $color-white; background-color: variables.$color-white;
content: ''; content: '';
display: block; display: block;
width: 100%; width: 100%;
@ -138,7 +147,7 @@
@media (forced-colors: active) { @media (forced-colors: active) {
background-color: WindowText; background-color: WindowText;
@include dark-theme { @include mixins.dark-theme {
background-color: WindowText; background-color: WindowText;
} }
} }
@ -146,10 +155,10 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: $color-white-alpha-20; background-color: variables.$color-white-alpha-20;
} }
&:active { &:active {
background-color: $color-white-alpha-20; background-color: variables.$color-white-alpha-20;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -158,7 +167,7 @@
&:active { &:active {
background-color: none; background-color: none;
} }
@include dark-theme { @include mixins.dark-theme {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
@ -177,12 +186,12 @@
max-width: 250px; max-width: 250px;
h3 { h3 {
@include font-body-1-bold; @include mixins.font-body-1-bold;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
span { span {
@include font-body-1; @include mixins.font-body-1;
display: inline-block; display: inline-block;
} }
a { a {
@ -204,7 +213,7 @@
background-color: $error-background-color; background-color: $error-background-color;
color: $error-text-color; color: $error-text-color;
@include any-theme { @include mixins.any-theme {
--tooltip-background-color: #{$error-background-color}; --tooltip-background-color: #{$error-background-color};
--tooltip-text-color: #{$error-text-color}; --tooltip-text-color: #{$error-text-color};
} }
@ -222,7 +231,7 @@
background-color: $warning-background-color; background-color: $warning-background-color;
color: $warning-text-color; color: $warning-text-color;
@include any-theme { @include mixins.any-theme {
--tooltip-background-color: #{$warning-background-color}; --tooltip-background-color: #{$warning-background-color};
--tooltip-text-color: #{$warning-text-color}; --tooltip-text-color: #{$warning-text-color};
} }
@ -255,7 +264,7 @@
&__progress { &__progress {
&--container { &--container {
background: $color-white-alpha-20; background: variables.$color-white-alpha-20;
border-radius: 2px; border-radius: 2px;
height: 4px; height: 4px;
max-width: 210px; max-width: 210px;
@ -269,11 +278,11 @@
animation: progress-animation 2s linear infinite; animation: progress-animation 2s linear infinite;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
$color-white-alpha-40, variables.$color-white-alpha-40,
$color-white-alpha-60, variables.$color-white-alpha-60,
$color-white-alpha-90, variables.$color-white-alpha-90,
$color-white-alpha-60, variables.$color-white-alpha-60,
$color-white-alpha-40 variables.$color-white-alpha-40
); );
background-size: 200% 100%; background-size: 200% 100%;
border-radius: 2px; border-radius: 2px;

79
stylesheets/components/LeftPaneSearchInput.scss
View file

@ -1,14 +1,18 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.LeftPaneSearchInput { .LeftPaneSearchInput {
&__input--with-children.module-SearchInput__input--with-children { &__input--with-children.module-SearchInput__input--with-children {
padding-inline-start: 50px; padding-inline-start: 50px;
} }
&__in-conversation-pill { &__in-conversation-pill {
@include button-reset; @include mixins.button-reset;
@include rounded-corners; & {
@include mixins.rounded-corners;
align-items: center; align-items: center;
bottom: 4px; bottom: 4px;
display: flex; display: flex;
@ -18,12 +22,13 @@
padding-inline: 0 3px; padding-inline: 0 3px;
position: absolute; position: absolute;
top: 4px; top: 4px;
@include light-theme {
background-color: $color-gray-25;
} }
@include dark-theme {
background-color: $color-gray-80; @include mixins.light-theme {
background-color: variables.$color-gray-25;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-80;
} }
&__x-button { &__x-button {
@ -31,25 +36,31 @@
margin-inline-start: 2px; margin-inline-start: 2px;
width: 16px; width: 16px;
@include light-theme { @include mixins.light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-60
);
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
} }
@include light-theme { @include mixins.light-theme {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $color-ultramarine; background: variables.$color-ultramarine;
} }
} }
@include dark-theme { @include mixins.dark-theme {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $color-ultramarine-light; background: variables.$color-ultramarine-light;
} }
} }
} }
@ -62,27 +73,29 @@
} }
&__FilterButton { &__FilterButton {
@include button-reset; @include mixins.button-reset;
& {
flex-shrink: 0; flex-shrink: 0;
padding: 4px; padding: 4px;
margin-inline-end: 8px; margin-inline-end: 8px;
border-radius: 4px; border-radius: 4px;
}
&:not(.LeftPaneSearchInput__FilterButton--pressed):hover { &:not(.LeftPaneSearchInput__FilterButton--pressed):hover {
@include light-theme { @include mixins.light-theme {
background-color: $color-black-alpha-06; background-color: variables.$color-black-alpha-06;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-white-alpha-06; background-color: variables.$color-white-alpha-06;
} }
} }
&:focus { &:focus {
outline: none; outline: none;
@include keyboard-mode { @include mixins.keyboard-mode {
box-shadow: box-shadow:
0 0 0 2px $color-white, 0 0 0 2px variables.$color-white,
0 0 0 4px $color-ultramarine; 0 0 0 4px variables.$color-ultramarine;
} }
} }
@ -91,33 +104,33 @@
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@include light-theme { @include mixins.light-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/filter/filter.svg', '../images/icons/v3/filter/filter.svg',
$color-black variables.$color-black
); );
} }
@include dark-theme { @include mixins.dark-theme {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/filter/filter.svg', '../images/icons/v3/filter/filter.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
&--pressed { &--pressed {
border-radius: 9999px; border-radius: 9999px;
background: $color-accent-blue; background: variables.$color-accent-blue;
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/filter/filter.svg', '../images/icons/v3/filter/filter.svg',
$color-white variables.$color-white
); );
} }
} }
} }
&__FilterLabel { &__FilterLabel {
@include sr-only; @include mixins.sr-only;
} }
} }

95
stylesheets/components/Lightbox.scss
View file

@ -1,14 +1,17 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Lightbox { .Lightbox {
&__container { &__container {
background-color: $color-black; background-color: variables.$color-black;
bottom: 0; bottom: 0;
inset-inline: 0; inset-inline: 0;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: $z-index-popup; z-index: variables.$z-index-popup;
} }
&__animated { &__animated {
@ -51,13 +54,15 @@
} }
&__thumbnail { &__thumbnail {
@include button-reset; @include mixins.button-reset;
& {
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
height: 44px; height: 44px;
margin-inline-end: 8px; margin-inline-end: 8px;
overflow: hidden; overflow: hidden;
width: 44px; width: 44px;
}
img { img {
height: 100%; height: 100%;
@ -74,15 +79,20 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
box-shadow: inset 0px 0px 0px 2px $color-white; box-shadow: inset 0px 0px 0px 2px variables.$color-white;
} }
&--unavailable { &--unavailable {
@include color-svg('../images/image.svg', $color-gray-25); @include mixins.color-svg(
'../images/image.svg',
variables.$color-gray-25
);
& {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
}
&__object { &__object {
&--container { &--container {
@ -92,7 +102,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
// Using this so that the zoom cleanly goes over the footer // Using this so that the zoom cleanly goes over the footer
z-index: $z-index-base; z-index: variables.$z-index-base;
&--zoom { &--zoom {
backface-visibility: hidden; backface-visibility: hidden;
@ -113,6 +123,7 @@
} }
} }
& {
height: auto; height: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@ -120,30 +131,39 @@
outline: none; outline: none;
width: auto; width: auto;
} }
}
&__unsupported { &__unsupported {
@include button-reset; @include mixins.button-reset;
& {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
max-width: 200px; max-width: 200px;
width: 100%; width: 100%;
}
&--image { &--image {
@include color-svg('../images/image.svg', $color-gray-25); @include mixins.color-svg(
'../images/image.svg',
variables.$color-gray-25
);
} }
&--video { &--video {
@include color-svg('../images/movie.svg', $color-gray-25); @include mixins.color-svg(
'../images/movie.svg',
variables.$color-gray-25
);
} }
&--file { &--file {
@include color-svg('../images/file.svg', $color-gray-25); @include mixins.color-svg('../images/file.svg', variables.$color-gray-25);
} }
&--missing { &--missing {
@include color-svg( @include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg', '../images/full-screen-flow/alert-outline.svg',
$color-gray-25 variables.$color-gray-25
); );
} }
} }
@ -158,11 +178,13 @@
} }
&__zoom-button { &__zoom-button {
@include button-reset; @include mixins.button-reset;
& {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
cursor: zoom-in; cursor: zoom-in;
} }
}
&__object--container--zoom, &__object--container--zoom,
&__object--container--fill { &__object--container--fill {
@ -172,8 +194,8 @@
} }
&__caption { &__caption {
@include font-body-2; @include mixins.font-body-2;
color: $color-white; color: variables.$color-white;
margin-block: 12px; margin-block: 12px;
margin-inline: 0; margin-inline: 0;
text-align: center; text-align: center;
@ -184,8 +206,8 @@
} }
&__timestamp { &__timestamp {
@include font-body-1; @include mixins.font-body-1;
background-color: $color-black; background-color: variables.$color-black;
border-radius: 15px; border-radius: 15px;
color: #eeefef; color: #eeefef;
padding-block: 6px; padding-block: 6px;
@ -201,7 +223,7 @@
height: var(--height); height: var(--height);
// We need this so that the buttons stack above the container // We need this so that the buttons stack above the container
z-index: $z-index-above-base; z-index: variables.$z-index-above-base;
// Added extended click zone only when it wouldn't overlap video controls // Added extended click zone only when it wouldn't overlap video controls
@media (min-height: 500px) { @media (min-height: 500px) {
@ -242,13 +264,13 @@
} }
&--name { &--name {
@include font-body-2-bold; @include mixins.font-body-2-bold;
color: $color-white; color: variables.$color-white;
} }
&--timestamp { &--timestamp {
@include font-caption; @include mixins.font-caption;
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -272,12 +294,13 @@
} }
&__button { &__button {
@include button-reset; @include mixins.button-reset;
& {
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
width: 24px; width: 24px;
}
&::before { &::before {
content: ''; content: '';
@ -287,33 +310,39 @@
} }
&:focus { &:focus {
outline: 4px solid $color-ultramarine; outline: 4px solid variables.$color-ultramarine;
} }
&:disabled { &:disabled {
&::before { &::before {
background: $color-gray-65; background: variables.$color-gray-65;
} }
} }
&--forward { &--forward {
&::before { &::before {
@include color-svg( @include mixins.color-svg(
'../images/icons/v3/forward/forward.svg', '../images/icons/v3/forward/forward.svg',
$color-gray-15 variables.$color-gray-15
); );
} }
} }
&--save { &--save {
&::before { &::before {
@include color-svg('../images/icons/v3/save/save.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/save/save.svg',
variables.$color-gray-15
);
} }
} }
&--close { &--close {
&::before { &::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15); @include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-15
);
} }
} }
@ -331,7 +360,7 @@
&::before { &::before {
width: 32px; width: 32px;
height: 32px; height: 32px;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40); -webkit-filter: drop-shadow(0 0 4px variables.$color-black-alpha-40);
content: ''; content: '';
display: block; display: block;
background-size: 100%; background-size: 100%;
@ -346,12 +375,12 @@
outline: none; outline: none;
} }
@include keyboard-mode { @include mixins.keyboard-mode {
&:focus { &:focus {
opacity: 1; opacity: 1;
} }
} }
@include button-focus-outline; @include mixins.button-focus-outline;
} }
&--previous { &--previous {

23
stylesheets/components/ListTile.scss
View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
button.ListTile { button.ListTile {
width: 100%; width: 100%;
} }
@ -33,7 +36,7 @@ button.ListTile {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: $inter; font-family: variables.$inter;
} }
&__title { &__title {
@ -50,7 +53,7 @@ button.ListTile {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
color: $color-gray-25; color: variables.$color-gray-25;
line-height: 17px; line-height: 17px;
&--max-lines-1 { &--max-lines-1 {
@ -63,11 +66,11 @@ button.ListTile {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
@include light-theme { @include mixins.light-theme {
color: $color-gray-60; color: variables.$color-gray-60;
} }
@include dark-theme { @include mixins.dark-theme {
color: $color-gray-25; color: variables.$color-gray-25;
} }
} }
@ -87,12 +90,12 @@ button.ListTile {
&:hover:not([aria-disabled='true'], [aria-selected='true']), &:hover:not([aria-disabled='true'], [aria-selected='true']),
&:focus:not([aria-disabled='true'], [aria-selected='true']) { &:focus:not([aria-disabled='true'], [aria-selected='true']) {
@include light-theme { @include mixins.light-theme {
background-color: $color-black-alpha-06; background-color: variables.$color-black-alpha-06;
} }
@include dark-theme { @include mixins.dark-theme {
background-color: $color-white-alpha-06; background-color: variables.$color-white-alpha-06;
} }
& .ConversationDetails-panel-row__actions { & .ConversationDetails-panel-row__actions {

4
stylesheets/components/LocalDeleteWarningModal.scss
View file

@ -1,6 +1,8 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.LocalDeleteWarningModal__width-container { .LocalDeleteWarningModal__width-container {
max-width: 440px; max-width: 440px;
} }
@ -11,7 +13,7 @@
} }
.LocalDeleteWarningModal__header { .LocalDeleteWarningModal__header {
@include font-title-2; @include mixins.font-title-2;
margin-block: 18px; margin-block: 18px;
margin-inline: 8px; margin-inline: 8px;

Some files were not shown because too many files have changed in this diff Show more