mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-08-28 00:46:33 +01:00
Fix all Sass deprecation warnings
This commit is contained in:
Jamie
@@ -2,237 +2,28 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
$color-accent-blue: #2c6bed;
|
||||
$color-accent-green: #4caf50;
|
||||
$color-accent-red: #f44336;
|
||||
$color-accent-yellow: #ffd624;
|
||||
|
||||
$color-white: #ffffff;
|
||||
$color-gray-02: #f6f6f6;
|
||||
$color-gray-04: #f0f0f0;
|
||||
$color-gray-05: #e9e9e9;
|
||||
$color-gray-15: #dedede;
|
||||
$color-gray-20: #c6c6c6;
|
||||
$color-gray-25: #b9b9b9;
|
||||
$color-gray-45: #848484;
|
||||
$color-gray-60: #5e5e5e;
|
||||
$color-gray-62: #545454;
|
||||
$color-gray-65: #4a4a4a;
|
||||
$color-gray-75: #3b3b3b;
|
||||
$color-gray-78: #343434;
|
||||
$color-gray-80: #2e2e2e;
|
||||
$color-gray-90: #1b1b1b;
|
||||
$color-gray-95: #121212;
|
||||
$color-black: #000000;
|
||||
|
||||
$color-white-alpha-06: rgba($color-white, 0.06);
|
||||
$color-white-alpha-08: rgba($color-white, 0.08);
|
||||
$color-white-alpha-12: rgba($color-white, 0.12);
|
||||
$color-white-alpha-16: rgba($color-white, 0.16);
|
||||
$color-white-alpha-20: rgba($color-white, 0.2);
|
||||
$color-white-alpha-40: rgba($color-white, 0.4);
|
||||
$color-white-alpha-60: rgba($color-white, 0.6);
|
||||
$color-white-alpha-70: rgba($color-white, 0.7);
|
||||
$color-white-alpha-75: rgba($color-white, 0.75);
|
||||
$color-white-alpha-80: rgba($color-white, 0.8);
|
||||
$color-white-alpha-90: rgba($color-white, 0.9);
|
||||
|
||||
$color-black-alpha-05: rgba($color-black, 0.05);
|
||||
$color-black-alpha-06: rgba($color-black, 0.06);
|
||||
$color-black-alpha-08: rgba($color-black, 0.08);
|
||||
$color-black-alpha-12: rgba($color-black, 0.12);
|
||||
$color-black-alpha-16: rgba($color-black, 0.16);
|
||||
$color-black-alpha-20: rgba($color-black, 0.2);
|
||||
$color-black-alpha-24: rgba($color-black, 0.24);
|
||||
$color-black-alpha-30: rgba($color-black, 0.3);
|
||||
$color-black-alpha-40: rgba($color-black, 0.4);
|
||||
$color-black-alpha-50: rgba($color-black, 0.5);
|
||||
$color-black-alpha-60: rgba($color-black, 0.6);
|
||||
$color-black-alpha-70: rgba($color-black, 0.7);
|
||||
$color-black-alpha-80: rgba($color-black, 0.8);
|
||||
$color-black-alpha-90: rgba($color-black, 0.9);
|
||||
|
||||
$color-transparent: rgba(0, 0, 0, 0);
|
||||
|
||||
$color-ultramarine-dark: #1851b4;
|
||||
$color-ultramarine-logo: #3b45fd;
|
||||
$color-ultramarine-light: #6191f3;
|
||||
$color-ultramarine-dawn: #406ec9;
|
||||
$color-ultramarine: #2c6bed;
|
||||
|
||||
// Flat colors
|
||||
|
||||
$color-crimson: #cf163e;
|
||||
$color-vermilion: #c73f0a;
|
||||
$color-burlap: #6f6a58;
|
||||
$color-forest: #3b7845;
|
||||
$color-wintergreen: #1d8663;
|
||||
$color-teal: #077d92;
|
||||
$color-blue: #336ba3;
|
||||
$color-indigo: #6058ca;
|
||||
$color-violet: #9932c8;
|
||||
$color-plum: #aa377a;
|
||||
$color-taupe: #8f616a;
|
||||
$color-steel: #71717f;
|
||||
|
||||
// Gradient colors
|
||||
|
||||
$color-ultramarine-gradient: (
|
||||
deg: 180deg,
|
||||
start: #0552f0,
|
||||
end: $color-ultramarine,
|
||||
);
|
||||
$color-basil: (
|
||||
deg: 180deg,
|
||||
start: #2f9373,
|
||||
end: #077343,
|
||||
);
|
||||
$color-ember: (
|
||||
deg: 168deg,
|
||||
start: #e57c00,
|
||||
end: #5e0000,
|
||||
);
|
||||
$color-fluorescent: (
|
||||
deg: 192deg,
|
||||
start: #ec13dd,
|
||||
end: #1b36c6,
|
||||
);
|
||||
$color-infrared: (
|
||||
deg: 192deg,
|
||||
start: #f65560,
|
||||
end: #442ced,
|
||||
);
|
||||
$color-lagoon: (
|
||||
deg: 180deg,
|
||||
start: #004066,
|
||||
end: #32867d,
|
||||
);
|
||||
$color-midnight: (
|
||||
deg: 180deg,
|
||||
start: #2c2c3a,
|
||||
end: #787891,
|
||||
);
|
||||
$color-sea: (
|
||||
deg: 180deg,
|
||||
start: #498fd4,
|
||||
end: #2c66a0,
|
||||
);
|
||||
$color-sublime: (
|
||||
deg: 180deg,
|
||||
start: #6281d5,
|
||||
end: #974460,
|
||||
);
|
||||
$color-tangerine: (
|
||||
deg: 192deg,
|
||||
start: #db7133,
|
||||
end: #911231,
|
||||
);
|
||||
|
||||
// Avatars
|
||||
|
||||
$avatar-color-A100: (
|
||||
bg: #e3e3fe,
|
||||
fg: #3838f5,
|
||||
);
|
||||
$avatar-color-A110: (
|
||||
bg: #dde7fc,
|
||||
fg: #1251d3,
|
||||
);
|
||||
$avatar-color-A120: (
|
||||
bg: #d8e8f0,
|
||||
fg: #086da0,
|
||||
);
|
||||
$avatar-color-A130: (
|
||||
bg: #cde4cd,
|
||||
fg: #067906,
|
||||
);
|
||||
$avatar-color-A140: (
|
||||
bg: #eae0fd,
|
||||
fg: #661aff,
|
||||
);
|
||||
$avatar-color-A150: (
|
||||
bg: #f5e3fe,
|
||||
fg: #9f00f0,
|
||||
);
|
||||
$avatar-color-A160: (
|
||||
bg: #f6d8ec,
|
||||
fg: #b8057c,
|
||||
);
|
||||
$avatar-color-A170: (
|
||||
bg: #f5d7d7,
|
||||
fg: #be0404,
|
||||
);
|
||||
$avatar-color-A180: (
|
||||
bg: #fef5d0,
|
||||
fg: #836b01,
|
||||
);
|
||||
$avatar-color-A190: (
|
||||
bg: #eae6d5,
|
||||
fg: #7d6f40,
|
||||
);
|
||||
$avatar-color-A200: (
|
||||
bg: #d2d2dc,
|
||||
fg: #4f4f6d,
|
||||
);
|
||||
$avatar-color-A210: (
|
||||
bg: #d7d7d9,
|
||||
fg: #5c5c5c,
|
||||
);
|
||||
|
||||
// Maps for easy manipulation
|
||||
|
||||
$avatar-colors: (
|
||||
A100: $avatar-color-A100,
|
||||
A110: $avatar-color-A110,
|
||||
A120: $avatar-color-A120,
|
||||
A130: $avatar-color-A130,
|
||||
A140: $avatar-color-A140,
|
||||
A150: $avatar-color-A150,
|
||||
A160: $avatar-color-A160,
|
||||
A170: $avatar-color-A170,
|
||||
A180: $avatar-color-A180,
|
||||
A190: $avatar-color-A190,
|
||||
A200: $avatar-color-A200,
|
||||
A210: $avatar-color-A210,
|
||||
);
|
||||
|
||||
$conversation-colors: (
|
||||
'blue': $color-blue,
|
||||
'burlap': $color-burlap,
|
||||
'crimson': $color-crimson,
|
||||
'forest': $color-forest,
|
||||
'indigo': $color-indigo,
|
||||
'plum': $color-plum,
|
||||
'steel': $color-steel,
|
||||
'taupe': $color-taupe,
|
||||
'teal': $color-teal,
|
||||
'vermilion': $color-vermilion,
|
||||
'violet': $color-violet,
|
||||
'wintergreen': $color-wintergreen,
|
||||
);
|
||||
|
||||
$conversation-colors-gradient: (
|
||||
'ultramarine': $color-ultramarine-gradient,
|
||||
'basil': $color-basil,
|
||||
'ember': $color-ember,
|
||||
'fluorescent': $color-fluorescent,
|
||||
'infrared': $color-infrared,
|
||||
'lagoon': $color-lagoon,
|
||||
'midnight': $color-midnight,
|
||||
'sea': $color-sea,
|
||||
'sublime': $color-sublime,
|
||||
'tangerine': $color-tangerine,
|
||||
);
|
||||
|
||||
// Used for the safety number change warning banner
|
||||
$color-ios-blue-tint: #b0c8f9;
|
||||
|
||||
// -- Non-V3 colors
|
||||
|
||||
// Used in spinners
|
||||
$color-white-alpha-40: rgba($color-white, 0.4);
|
||||
|
||||
// Used in tap-to-view error states
|
||||
$color-deep-red: #ff261f;
|
||||
|
||||
$color-selected-message-background-light: rgba(44, 107, 237, 0.24);
|
||||
$color-selected-message-background-dark: $color-gray-65;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
$width: 186px;
|
||||
$height: 186px;
|
||||
@@ -40,26 +40,26 @@ $emoji-height: 64px;
|
||||
style: solid;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-gray-25;
|
||||
background: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-gray-25;
|
||||
background: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-60;
|
||||
background: $color-gray-90;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-gray-60;
|
||||
background: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
&[data-drag-active='true'] {
|
||||
@include light-theme() {
|
||||
border-color: $color-ultramarine;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-ultramarine-light;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,24 +80,24 @@ $emoji-height: 64px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-25;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-25;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-60;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-spinner {
|
||||
composes: spinner;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-75;
|
||||
}
|
||||
|
||||
padding: 4px;
|
||||
@@ -113,12 +113,12 @@ $emoji-height: 64px;
|
||||
width: $border-width;
|
||||
style: dashed;
|
||||
}
|
||||
@include light-theme() {
|
||||
border-color: $color-gray-25;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-gray-25;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-60;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
width: $width - (2 * $guide-offset);
|
||||
@@ -147,18 +147,18 @@ $emoji-height: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
filter: drop-shadow(0px 0px 2px $color-black-alpha-60);
|
||||
filter: drop-shadow(0px 0px 2px colors.$color-black-alpha-60);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $color-white;
|
||||
background: colors.$color-white;
|
||||
mask-image: url(/src/assets/icons/x-20.svg);
|
||||
-webkit-mask-image: url(/src/assets/icons/x-20.svg);
|
||||
}
|
||||
@@ -178,12 +178,12 @@ $emoji-height: 64px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,24 +205,24 @@ $emoji-height: 64px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-45;
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: $color-accent-blue;
|
||||
border-color: colors.$color-accent-blue;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-gray-15;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
border: 1px solid colors.$color-gray-15;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 1px solid $color-gray-60;
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
border: 1px solid colors.$color-gray-60;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
@mixin background() {
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font: {
|
||||
family: $inter;
|
||||
family: fonts.$inter;
|
||||
size: 14px;
|
||||
weight: 500;
|
||||
}
|
||||
@@ -44,12 +44,12 @@
|
||||
|
||||
@include background();
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme {
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
overflow: auto;
|
||||
justify-items: center;
|
||||
|
||||
@include small-screen() {
|
||||
@include mixins.small-screen() {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
@@ -82,12 +82,12 @@
|
||||
padding-inline: 16px;
|
||||
display: flex;
|
||||
|
||||
@include light-theme {
|
||||
background: $color-white;
|
||||
@include mixins.light-theme {
|
||||
background: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background: $color-gray-60;
|
||||
@include mixins.dark-theme {
|
||||
background: colors.$color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
}
|
||||
|
||||
.meta-title {
|
||||
@@ -111,12 +111,12 @@
|
||||
weight: 600;
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-95;
|
||||
@include mixins.light-theme {
|
||||
color: colors.$color-gray-95;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme {
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -128,11 +128,11 @@
|
||||
weight: 400;
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
@include mixins.dark-theme {
|
||||
color: colors.$color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
@@ -11,14 +11,14 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-gray-15;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
border: 1px solid colors.$color-gray-15;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 1px solid $color-gray-60;
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
border: 1px solid colors.$color-gray-60;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use 'sass:color';
|
||||
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
border: none;
|
||||
@@ -15,37 +17,53 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-gray-05;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-65;
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-65;
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include light-theme() {
|
||||
background-color: mix($color-black, $color-gray-05, 15%);
|
||||
@include mixins.light-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-black,
|
||||
colors.$color-gray-05,
|
||||
15%
|
||||
);
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: mix($color-white, $color-gray-65, 15%);
|
||||
@include mixins.dark-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-white,
|
||||
colors.$color-gray-65,
|
||||
15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include light-theme() {
|
||||
background-color: mix($color-black, $color-gray-05, 25%);
|
||||
@include mixins.light-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-black,
|
||||
colors.$color-gray-05,
|
||||
25%
|
||||
);
|
||||
}
|
||||
@include dark-theme() {
|
||||
background-color: mix($color-white, $color-gray-65, 25%);
|
||||
@include mixins.dark-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-white,
|
||||
colors.$color-gray-65,
|
||||
25%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,32 +74,48 @@
|
||||
|
||||
.primary {
|
||||
composes: base;
|
||||
background-color: $color-ultramarine;
|
||||
background-color: colors.$color-ultramarine;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include light-theme() {
|
||||
background-color: mix($color-black, $color-ultramarine, 15%);
|
||||
@include mixins.light-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-black,
|
||||
colors.$color-ultramarine,
|
||||
15%
|
||||
);
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: mix($color-white, $color-ultramarine, 15%);
|
||||
@include mixins.dark-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-white,
|
||||
colors.$color-ultramarine,
|
||||
15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include light-theme() {
|
||||
background-color: mix($color-black, $color-ultramarine, 25%);
|
||||
@include mixins.light-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-black,
|
||||
colors.$color-ultramarine,
|
||||
25%
|
||||
);
|
||||
}
|
||||
@include dark-theme() {
|
||||
background-color: mix($color-white, $color-ultramarine, 25%);
|
||||
@include mixins.dark-theme() {
|
||||
background-color: color.mix(
|
||||
colors.$color-white,
|
||||
colors.$color-ultramarine,
|
||||
25%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -93,15 +127,15 @@
|
||||
padding-block: 0;
|
||||
padding-inline: 17px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
border: 1px solid $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
border: 1px solid colors.$color-gray-90;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
border: 1px solid $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
border: 1px solid colors.$color-white;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -109,15 +143,15 @@
|
||||
.pill-primary {
|
||||
composes: pill;
|
||||
|
||||
@include light-theme() {
|
||||
@include mixins.light-theme() {
|
||||
border: none;
|
||||
background-color: $color-ultramarine;
|
||||
color: $color-white;
|
||||
background-color: colors.$color-ultramarine;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
@include mixins.dark-theme() {
|
||||
border: none;
|
||||
background-color: $color-ultramarine-light;
|
||||
color: $color-white;
|
||||
background-color: colors.$color-ultramarine-light;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
max-width: 468px;
|
||||
@@ -16,12 +16,12 @@
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0 rgba(0, 0, 0, 0.33);
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,17 +31,17 @@
|
||||
|
||||
.text {
|
||||
font: {
|
||||
family: $inter;
|
||||
family: fonts.$inter;
|
||||
size: 14px;
|
||||
}
|
||||
margin: 0;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,12 +50,12 @@
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,15 +74,15 @@
|
||||
padding-block: 0;
|
||||
padding-inline: 17px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
border: 1px solid $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
border: 1px solid colors.$color-gray-90;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
border: 1px solid $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
border: 1px solid colors.$color-white;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -90,15 +90,15 @@
|
||||
.pill-primary {
|
||||
composes: pill;
|
||||
|
||||
@include light-theme() {
|
||||
@include mixins.light-theme() {
|
||||
border: none;
|
||||
background-color: $color-ultramarine;
|
||||
color: $color-white;
|
||||
background-color: colors.$color-ultramarine;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
@include mixins.dark-theme() {
|
||||
border: none;
|
||||
background-color: $color-ultramarine-light;
|
||||
color: $color-white;
|
||||
background-color: colors.$color-ultramarine-light;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.container {
|
||||
flex-grow: 1;
|
||||
@@ -24,19 +24,19 @@
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-45;
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-gray-15;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
border: 1px solid colors.$color-gray-15;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 1px solid $color-gray-60;
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
border: 1px solid colors.$color-gray-60;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
width: 100%;
|
||||
@@ -14,28 +14,28 @@
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-45;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-block: 16px 0;
|
||||
margin-inline: 0;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-45;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,27 +44,27 @@
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-gray-02;
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-gray-02;
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-80;
|
||||
color: $color-gray-25;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-gray-80;
|
||||
color: colors.$color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
composes: standalone;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-ultramarine;
|
||||
outline: 3px solid $color-ultramarine;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-ultramarine;
|
||||
outline: 3px solid colors.$color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-ultramarine-light;
|
||||
outline: 3px solid $color-ultramarine-light;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-ultramarine-light;
|
||||
outline: 3px solid colors.$color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
|
||||
.base {
|
||||
display: flex;
|
||||
@@ -37,20 +37,20 @@
|
||||
style: solid;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-25;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-checked {
|
||||
composes: checkbox;
|
||||
border: none;
|
||||
background-color: $color-ultramarine;
|
||||
color: $color-white;
|
||||
background-color: colors.$color-ultramarine;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
@@ -16,7 +16,7 @@
|
||||
.label {
|
||||
user-select: none;
|
||||
font-size: 13px;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -30,20 +30,20 @@
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-45;
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-gray-15;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
border: 1px solid colors.$color-gray-15;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 1px solid $color-gray-60;
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
border: 1px solid colors.$color-gray-60;
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -51,12 +51,12 @@
|
||||
padding-block: 0;
|
||||
padding-inline: 11px;
|
||||
|
||||
@include light-theme() {
|
||||
border: 2px solid $color-ultramarine;
|
||||
@include mixins.light-theme() {
|
||||
border: 2px solid colors.$color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 2px solid $color-ultramarine-light;
|
||||
@include mixins.dark-theme() {
|
||||
border: 2px solid colors.$color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
background-color: $color-ultramarine;
|
||||
background-color: colors.$color-ultramarine;
|
||||
padding-block: 6px;
|
||||
padding-inline: 12px;
|
||||
border-radius: 18px;
|
||||
color: $color-white-alpha-90;
|
||||
color: colors.$color-white-alpha-90;
|
||||
font: {
|
||||
size: 12px;
|
||||
family: $inter;
|
||||
family: fonts.$inter;
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
display: flex;
|
||||
@@ -16,7 +16,7 @@
|
||||
margin-inline-start: 6px;
|
||||
font: {
|
||||
size: 11px;
|
||||
family: $inter;
|
||||
family: fonts.$inter;
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
.light {
|
||||
composes: item;
|
||||
color: $color-gray-60;
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
|
||||
.container {
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
border-bottom-style: solid;
|
||||
padding-block: 0;
|
||||
padding-inline: 64px;
|
||||
@include small-screen() {
|
||||
@include mixins.small-screen() {
|
||||
padding-block: 0;
|
||||
padding-inline: 32px;
|
||||
}
|
||||
@@ -23,12 +23,12 @@
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include light-theme() {
|
||||
border-bottom-color: $color-gray-15;
|
||||
@include mixins.light-theme() {
|
||||
border-bottom-color: colors.$color-gray-15;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-bottom-color: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
border-bottom-color: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
|
||||
.base {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
max-width: 448px;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-gray-15;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-gray-15;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 4px;
|
||||
width: 0px;
|
||||
background: $color-ultramarine;
|
||||
background: colors.$color-ultramarine;
|
||||
|
||||
transition: width 100ms ease-out;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
|
||||
.base {
|
||||
width: 380px;
|
||||
@@ -13,12 +13,12 @@
|
||||
box-shadow: 0 2px 13px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,13 +30,13 @@
|
||||
|
||||
.frame-light {
|
||||
composes: frame;
|
||||
background: $color-white;
|
||||
background: colors.$color-white;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.frame-dark {
|
||||
composes: frame;
|
||||
background: $color-black;
|
||||
background: colors.$color-black;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
@@ -52,12 +52,12 @@
|
||||
border-width: 0 8px 8px 8px;
|
||||
top: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: transparent transparent $color-white transparent;
|
||||
@include mixins.light-theme() {
|
||||
border-color: transparent transparent colors.$color-white transparent;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: transparent transparent $color-gray-75 transparent;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: transparent transparent colors.$color-gray-75 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,12 +66,12 @@
|
||||
border-width: 8px 8px 0 8px;
|
||||
bottom: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-white transparent transparent transparent;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-white transparent transparent transparent;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-75 transparent transparent transparent;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-gray-75 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
border-width: 8px 8px 8px 0;
|
||||
inset-inline-start: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: transparent $color-white transparent transparent;
|
||||
@include mixins.light-theme() {
|
||||
border-color: transparent colors.$color-white transparent transparent;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: transparent $color-gray-75 transparent transparent;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: transparent colors.$color-gray-75 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,11 +94,11 @@
|
||||
border-width: 8px 0 8px 8px;
|
||||
inset-inline-end: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: transparent transparent transparent $color-white;
|
||||
@include mixins.light-theme() {
|
||||
border-color: transparent transparent transparent colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: transparent transparent transparent $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: transparent transparent transparent colors.$color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../mixins.scss';
|
||||
@import '../colors.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
padding-block: 8px;
|
||||
@@ -11,19 +11,19 @@
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-gray-75;
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-15;
|
||||
color: $color-gray-95;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-15;
|
||||
color: colors.$color-gray-95;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../colors.scss';
|
||||
@import '../mixins.scss';
|
||||
@import '../fonts.scss';
|
||||
@use '../colors.scss';
|
||||
@use '../mixins.scss';
|
||||
@use '../fonts.scss';
|
||||
|
||||
.base {
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,12 +35,12 @@
|
||||
line-height: 18px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,16 +49,16 @@
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-ultramarine;
|
||||
color: colors.$color-ultramarine;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -69,11 +69,11 @@
|
||||
}
|
||||
|
||||
.secondary {
|
||||
@include light-theme() {
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-25;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,79 +67,8 @@ $inter: Inter, 'Source Sans Pro', 'Source Han Sans', 'Signal Emoji Large',
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-title-1 {
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
@mixin font-title-2 {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.34px;
|
||||
}
|
||||
|
||||
@mixin font-body-1 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.08px;
|
||||
}
|
||||
@mixin font-body-1-bold {
|
||||
@include font-body-1;
|
||||
font-weight: 600;
|
||||
}
|
||||
@mixin font-body-1-italic {
|
||||
@include font-body-1;
|
||||
font-style: italic;
|
||||
}
|
||||
@mixin font-body-1-bold-italic {
|
||||
@include font-body-1;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin font-body-2 {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.03px;
|
||||
}
|
||||
@mixin font-body-2-bold {
|
||||
@include font-body-2;
|
||||
font-weight: 600;
|
||||
}
|
||||
@mixin font-body-2-medium {
|
||||
@include font-body-2;
|
||||
font-weight: 500;
|
||||
}
|
||||
@mixin font-body-2-italic {
|
||||
@include font-body-2;
|
||||
font-style: italic;
|
||||
}
|
||||
@mixin font-body-2-bold-italic {
|
||||
@include font-body-2;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin font-subtitle {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@mixin font-caption {
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.06px;
|
||||
}
|
||||
@mixin font-caption-bold {
|
||||
@include font-caption;
|
||||
font-weight: 600;
|
||||
}
|
||||
@mixin font-caption-bold-italic {
|
||||
@include font-caption;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import './mixins.scss';
|
||||
@import './colors.scss';
|
||||
@import './fonts.scss';
|
||||
@use './mixins.scss';
|
||||
@use './colors.scss';
|
||||
@use './fonts.scss';
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@@ -25,16 +25,16 @@ body {
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
|
||||
@include font-family;
|
||||
@include font-body-1;
|
||||
@include fonts.font-family;
|
||||
@include fonts.font-body-1;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-white;
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-white;
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-95;
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-95;
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,31 +54,31 @@ button {
|
||||
|
||||
button.grey {
|
||||
border-radius: 5px;
|
||||
border: solid 1px $color-gray-25;
|
||||
border: solid 1px colors.$color-gray-25;
|
||||
cursor: pointer;
|
||||
margin-block: 1em;
|
||||
margin-inline: auto;
|
||||
padding: 1em;
|
||||
font-family: inherit;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
background: $color-gray-02;
|
||||
box-shadow: 0 0 10px -5px $color-black-alpha-40;
|
||||
@include mixins.light-theme {
|
||||
color: colors.$color-gray-60;
|
||||
background: colors.$color-gray-02;
|
||||
box-shadow: 0 0 10px -5px colors.$color-black-alpha-40;
|
||||
}
|
||||
@include dark-theme {
|
||||
border: solid 1px $color-gray-25;
|
||||
color: $color-gray-60;
|
||||
background: $color-gray-02;
|
||||
box-shadow: 0 0 10px -5px $color-white-alpha-60;
|
||||
@include mixins.dark-theme {
|
||||
border: solid 1px colors.$color-gray-25;
|
||||
color: colors.$color-gray-60;
|
||||
background: colors.$color-gray-02;
|
||||
box-shadow: 0 0 10px -5px colors.$color-white-alpha-60;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include light-theme {
|
||||
box-shadow: 0 0 10px -3px $color-black-alpha-60;
|
||||
@include mixins.light-theme {
|
||||
box-shadow: 0 0 10px -3px colors.$color-black-alpha-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
box-shadow: 0 0 10px -3px $color-white-alpha-80;
|
||||
@include mixins.dark-theme {
|
||||
box-shadow: 0 0 10px -3px colors.$color-white-alpha-80;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,11 +93,11 @@ button.grey {
|
||||
}
|
||||
|
||||
a {
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
@include dark-theme() {
|
||||
color: $color-gray-05;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,12 +106,12 @@ a {
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-white;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-90;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,7 +122,7 @@ a {
|
||||
|
||||
.epr-search,
|
||||
.epr-emoji-category-label {
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
}
|
||||
|
||||
button.epr-emoji {
|
||||
|
||||
@@ -13,32 +13,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
|
||||
@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
|
||||
-webkit-mask: url($svg) no-repeat center;
|
||||
@if $stretch {
|
||||
-webkit-mask-size: 100%;
|
||||
}
|
||||
@if $mask-origin {
|
||||
-webkit-mask-origin: $mask-origin;
|
||||
}
|
||||
background-color: $color;
|
||||
@media (forced-colors: active) {
|
||||
background-color: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
// Other
|
||||
|
||||
@mixin popper-shadow() {
|
||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid WindowText;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-screen() {
|
||||
@media screen and (max-width: 800px) {
|
||||
@content;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../../mixins.scss';
|
||||
@use '../../mixins.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
@@ -34,7 +34,7 @@
|
||||
padding-block: 0;
|
||||
padding-inline: 64px;
|
||||
|
||||
@include small-screen() {
|
||||
@include mixins.small-screen() {
|
||||
padding-block: 0;
|
||||
padding-inline: 32px;
|
||||
}
|
||||
@@ -55,7 +55,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@include small-screen() {
|
||||
@include mixins.small-screen() {
|
||||
margin-block: 16px;
|
||||
margin-inline: 32px;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../../colors.scss';
|
||||
@import '../../mixins.scss';
|
||||
@import '../../fonts.scss';
|
||||
@use '../../colors.scss';
|
||||
@use '../../mixins.scss';
|
||||
@use '../../fonts.scss';
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
@@ -28,16 +28,16 @@
|
||||
.label {
|
||||
user-select: none;
|
||||
font-size: 13px;
|
||||
font-family: $inter;
|
||||
font-family: fonts.$inter;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-white;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,21 +68,21 @@
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
border-color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-25;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-gray-25;
|
||||
}
|
||||
|
||||
&[data-drag-active='true'] {
|
||||
@include light-theme() {
|
||||
border-color: $color-ultramarine;
|
||||
@include mixins.light-theme() {
|
||||
border-color: colors.$color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-ultramarine-light;
|
||||
@include mixins.dark-theme() {
|
||||
border-color: colors.$color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -96,12 +96,12 @@
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
@include mixins.light-theme() {
|
||||
background-color: colors.$color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-75;
|
||||
@include mixins.dark-theme() {
|
||||
background-color: colors.$color-gray-75;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@@ -117,12 +117,12 @@
|
||||
-webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);
|
||||
-webkit-mask-size: 22px;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-black;
|
||||
@include mixins.light-theme() {
|
||||
background: colors.$color-black;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-white-alpha-75;
|
||||
@include mixins.dark-theme() {
|
||||
background: colors.$color-white-alpha-75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../../mixins.scss';
|
||||
@use '../../mixins.scss';
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@import '../../mixins.scss';
|
||||
@import '../../colors.scss';
|
||||
@use '../../mixins.scss';
|
||||
@use '../../colors.scss';
|
||||
|
||||
.base {
|
||||
height: 100%;
|
||||
@@ -17,12 +17,12 @@
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-60;
|
||||
@include mixins.light-theme() {
|
||||
color: colors.$color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-45;
|
||||
@include mixins.dark-theme() {
|
||||
color: colors.$color-gray-45;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import * as sass from 'sass';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
@@ -10,6 +11,14 @@ export default defineConfig({
|
||||
modules: {
|
||||
localsConvention: 'camelCaseOnly',
|
||||
},
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// setting the version number is not working for some reason
|
||||
fatalDeprecations: Object.values(sass.deprecations)
|
||||
.filter(dep => dep.status !== 'obsolete')
|
||||
.map(dep => dep.id),
|
||||
},
|
||||
},
|
||||
},
|
||||
worker: {
|
||||
format: 'es',
|
||||
|
||||
Reference in New Issue
Block a user