Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
BIN
research/chatwoot/app/javascript/widget/assets/images/defaultUser.png
Executable file
BIN
research/chatwoot/app/javascript/widget/assets/images/defaultUser.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>woot-log</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="woot-log" fill-rule="nonzero">
|
||||
<circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
|
||||
<path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 916 B |
11
research/chatwoot/app/javascript/widget/assets/images/message-send.svg
Executable file
11
research/chatwoot/app/javascript/widget/assets/images/message-send.svg
Executable file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>message-send</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="message-send" fill="#999A9B" fill-rule="nonzero">
|
||||
<path d="M18.34,7.32 L4.34,0.32 C3.20803579,-0.243393454 1.84434515,-0.0365739638 0.930331262,0.837115781 C0.0163173744,1.71080553 -0.251780361,3.06378375 0.26,4.22 L2.66,9.59 L2.66,9.59 C2.77000426,9.8522654 2.77000426,10.1477346 2.66,10.41 L0.26,15.78 C-0.153051509,16.7079201 -0.0685371519,17.7818234 0.48458191,18.6337075 C1.03770097,19.4855916 1.98429967,19.9997529 3,20 C3.46823099,19.9953274 3.9294892,19.8859921 4.35,19.68 L18.35,12.68 C19.3627539,12.1705304 20.001816,11.1336797 20.001816,10 C20.001816,8.86632027 19.3627539,7.82946961 18.35,7.32 L18.34,7.32 Z M17.45,10.89 L3.45,17.89 C3.07351737,18.0707705 2.62434212,17.9985396 2.32351279,17.7088521 C2.02268345,17.4191646 1.93356002,16.9730338 2.1,16.59 L4.49,11.22 C4.5209392,11.1482915 4.54765161,11.0748324 4.57,11 L11.46,11 C12.0122847,11 12.46,10.5522847 12.46,10 C12.46,9.44771525 12.0122847,9 11.46,9 L4.57,9 C4.54765161,8.9251676 4.5209392,8.85170847 4.49,8.78 L2.1,3.41 C1.93356002,3.02696622 2.02268345,2.5808354 2.32351279,2.2911479 C2.62434212,2.00146039 3.07351737,1.92922952 3.45,2.11 L17.45,9.11 C17.7839662,9.28109597 17.9940395,9.62475706 17.9940395,10 C17.9940395,10.3752429 17.7839662,10.718904 17.45,10.89 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
|
After Width: | Height: | Size: 352 B |
BIN
research/chatwoot/app/javascript/widget/assets/images/send.png
Executable file
BIN
research/chatwoot/app/javascript/widget/assets/images/send.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
research/chatwoot/app/javascript/widget/assets/images/typing.gif
Normal file
BIN
research/chatwoot/app/javascript/widget/assets/images/typing.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
53
research/chatwoot/app/javascript/widget/assets/scss/_reset.scss
Executable file
53
research/chatwoot/app/javascript/widget/assets/scss/_reset.scss
Executable file
@@ -0,0 +1,53 @@
|
||||
// scss-lint:disable
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
.file-uploads .attachment-button + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conversation-wrap {
|
||||
.agent-message {
|
||||
@apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[88%];
|
||||
|
||||
.avatar-wrap {
|
||||
@apply flex-shrink-0 h-6 w-6;
|
||||
|
||||
.user-thumbnail-box {
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
@apply flex-grow flex-shrink-0 ltr:ml-2 rtl:mr-2 max-w-[90%];
|
||||
}
|
||||
}
|
||||
|
||||
&.is-typing .messages-wrap div:last-child {
|
||||
.agent-message {
|
||||
.agent-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-thumbnail-box {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
@apply text-xs font-medium my-2 ltr:pl-0.5 rtl:pr-0.5;
|
||||
}
|
||||
|
||||
.has-attachment {
|
||||
overflow: hidden;
|
||||
|
||||
:not([audio]) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.has-text {
|
||||
@apply mt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-message-wrap {
|
||||
+ .agent-message-wrap {
|
||||
@apply mt-0.5;
|
||||
|
||||
.agent-message .chat-bubble {
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .user-message-wrap {
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
&.has-response + .user-message-wrap {
|
||||
@apply mt-0.5;
|
||||
|
||||
.chat-bubble {
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&.has-response + .agent-message-wrap {
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
@apply flex items-end flex-row justify-end max-w-[85%] ltr:text-right rtl:text-left mt-0 ltr:ml-auto rtl:mr-auto ltr:mr-1 rtl:ml-1 mb-0.5;
|
||||
|
||||
.message-wrap {
|
||||
@apply max-w-full ltr:mr-2 rtl:ml-2;
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.is-failed {
|
||||
@apply flex items-end flex-row-reverse;
|
||||
|
||||
.chat-bubble.user {
|
||||
@apply bg-n-ruby-9 dark:bg-n-ruby-9 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user.has-attachment {
|
||||
.icon-wrap {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.download {
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message-wrap {
|
||||
+ .user-message-wrap {
|
||||
@apply mt-0.5;
|
||||
|
||||
.user-message .chat-bubble {
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .agent-message-wrap {
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-messages {
|
||||
@apply flex flex-col flex-nowrap mt-0 overflow-y-auto w-full pb-2;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
@apply mb-1;
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
@apply border border-solid border-n-slate-5 dark:border-n-slate-11/50 text-n-black;
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
@apply ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-widget-right .unread-wrap {
|
||||
@apply ltr:text-right rtl:text-left overflow-hidden;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem] rounded-[1.25rem];
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
@apply ltr:rounded-br-[1.25rem] rtl:rounded-bl-[1.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
.close-unread-wrap {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
@apply shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] rounded-[1.25rem] inline-block text-sm leading-[1.5] max-w-full ltr:text-left rtl:text-right py-3 px-4 text-white;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
:not([audio]) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> a {
|
||||
@apply text-n-brand;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.user {
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem];
|
||||
|
||||
> a {
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.agent {
|
||||
@apply ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] text-n-slate-12;
|
||||
|
||||
.link {
|
||||
@apply text-n-brand;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
382
research/chatwoot/app/javascript/widget/assets/scss/woot.scss
Executable file
382
research/chatwoot/app/javascript/widget/assets/scss/woot.scss
Executable file
@@ -0,0 +1,382 @@
|
||||
@import 'reset';
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
@import 'shared/assets/fonts/widget_fonts';
|
||||
@import 'views/conversation';
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply antialiased h-full;
|
||||
}
|
||||
|
||||
.is-mobile {
|
||||
display: block;
|
||||
|
||||
.actions {
|
||||
.close-button {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.new-window--button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-bubble-hidden {
|
||||
.actions {
|
||||
.close-button {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
ul {
|
||||
list-style: disc;
|
||||
@apply ltr:pl-3 rtl:pr-3;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
@apply ltr:pl-4 rtl:pr-4;
|
||||
}
|
||||
}
|
||||
|
||||
.is-flat-design {
|
||||
.chat-bubble {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.chat-message--input {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&.is-focused {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply block font-medium py-1 px-0 capitalize;
|
||||
}
|
||||
|
||||
input:not(.reset-base),
|
||||
textarea:not(.reset-base) {
|
||||
font-family: inherit;
|
||||
@apply rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] outline-n-weak block text-base leading-[1.5] p-2.5 w-full text-n-slate-12 focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
|
||||
|
||||
&:disabled {
|
||||
@apply opacity-40 cursor-not-allowed;
|
||||
}
|
||||
|
||||
&:placeholder-shown {
|
||||
@apply text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select:not(.reset-base) {
|
||||
@apply bg-n-background dark:bg-n-alpha-2 w-full p-2.5 border-none outline outline-1 outline-offset-[-1px] outline-n-weak rounded-lg text-n-slate-12 text-base ltr:pr-10 rtl:pl-10 font-normal ltr:bg-[right_-1.6rem_center] rtl:bg-[left_-1.6rem_center] focus:outline-n-brand focus:ring-1 focus:ring-n-brand;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 9px 6px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
p code {
|
||||
@apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 text-sm inline-block rounded py-px px-1;
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply bg-n-slate-3 dark:bg-n-alpha-2 text-n-slate-11 overflow-y-auto rounded-md p-2 mt-1 mb-2 block leading-[1.5] whitespace-pre-wrap;
|
||||
|
||||
code {
|
||||
@apply bg-transparent text-n-slate-11 p-0 text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply ltr:border-l-4 rtl:border-r-4 border-n-slate-3 dark:border-n-alpha-2 border-solid my-1 px-0 text-n-slate-11 py-1 ltr:pr-2 rtl:pr-4 ltr:pl-4 rtl:pl-2;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply appearance-none bg-n-brand border border-solid border-n-brand text-white cursor-pointer inline-block text-sm h-10 leading-none outline-none outline-0 py-1 px-4 text-center no-underline select-none align-middle whitespace-nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@apply no-underline border-n-brand brightness-110;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@apply no-underline border-n-brand brightness-125;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.small {
|
||||
@apply text-xs h-6 py-1 px-3;
|
||||
}
|
||||
|
||||
&.large {
|
||||
@apply text-base h-12 py-2 px-6;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable PropertySortOrder
|
||||
@layer base {
|
||||
// NEXT COLORS START
|
||||
:root {
|
||||
// slate
|
||||
--slate-1: 252 252 253;
|
||||
--slate-2: 249 249 251;
|
||||
--slate-3: 240 240 243;
|
||||
--slate-4: 232 232 236;
|
||||
--slate-5: 224 225 230;
|
||||
--slate-6: 217 217 224;
|
||||
--slate-7: 205 206 214;
|
||||
--slate-8: 185 187 198;
|
||||
--slate-9: 139 141 152;
|
||||
--slate-10: 128 131 141;
|
||||
--slate-11: 96 100 108;
|
||||
--slate-12: 28 32 36;
|
||||
|
||||
// iris
|
||||
--iris-1: 253 253 255;
|
||||
--iris-2: 248 248 255;
|
||||
--iris-3: 240 241 254;
|
||||
--iris-4: 230 231 255;
|
||||
--iris-5: 218 220 255;
|
||||
--iris-6: 203 205 255;
|
||||
--iris-7: 184 186 248;
|
||||
--iris-8: 155 158 240;
|
||||
--iris-9: 91 91 214;
|
||||
--iris-10: 81 81 205;
|
||||
--iris-11: 87 83 198;
|
||||
--iris-12: 39 41 98;
|
||||
|
||||
// ruby
|
||||
--ruby-1: 255 252 253;
|
||||
--ruby-2: 255 247 248;
|
||||
--ruby-3: 254 234 237;
|
||||
--ruby-4: 255 220 225;
|
||||
--ruby-5: 255 206 214;
|
||||
--ruby-6: 248 191 200;
|
||||
--ruby-7: 239 172 184;
|
||||
--ruby-8: 229 146 163;
|
||||
--ruby-9: 229 70 102;
|
||||
--ruby-10: 220 59 93;
|
||||
--ruby-11: 202 36 77;
|
||||
--ruby-12: 100 23 43;
|
||||
|
||||
// amber
|
||||
--amber-1: 254 253 251;
|
||||
--amber-2: 254 251 233;
|
||||
--amber-3: 255 247 194;
|
||||
--amber-4: 255 238 156;
|
||||
--amber-5: 251 229 119;
|
||||
--amber-6: 243 214 115;
|
||||
--amber-7: 233 193 98;
|
||||
--amber-8: 226 163 54;
|
||||
--amber-9: 255 197 61;
|
||||
--amber-10: 255 186 24;
|
||||
--amber-11: 171 100 0;
|
||||
--amber-12: 79 52 34;
|
||||
|
||||
// teal
|
||||
--teal-1: 250 254 253;
|
||||
--teal-2: 243 251 249;
|
||||
--teal-3: 224 248 243;
|
||||
--teal-4: 204 243 234;
|
||||
--teal-5: 184 234 224;
|
||||
--teal-6: 161 222 210;
|
||||
--teal-7: 131 205 193;
|
||||
--teal-8: 83 185 171;
|
||||
--teal-9: 18 165 148;
|
||||
--teal-10: 13 155 138;
|
||||
--teal-11: 0 133 115;
|
||||
--teal-12: 13 61 56;
|
||||
|
||||
// gray
|
||||
--gray-1: 252 252 252;
|
||||
--gray-2: 249 249 249;
|
||||
--gray-3: 240 240 240;
|
||||
--gray-4: 232 232 232;
|
||||
--gray-5: 224 224 224;
|
||||
--gray-6: 217 217 217;
|
||||
--gray-7: 206 206 206;
|
||||
--gray-8: 187 187 187;
|
||||
--gray-9: 141 141 141;
|
||||
--gray-10: 131 131 131;
|
||||
--gray-11: 100 100 100;
|
||||
--gray-12: 32 32 32;
|
||||
|
||||
--background-color: 253 253 253;
|
||||
--text-blue: 8 109 224;
|
||||
--border-container: 236 236 236;
|
||||
--border-strong: 235 235 235;
|
||||
--border-weak: 234 234 234;
|
||||
--solid-1: 255 255 255;
|
||||
--solid-2: 255 255 255;
|
||||
--solid-3: 255 255 255;
|
||||
--solid-active: 255 255 255;
|
||||
--solid-amber: 252 232 193;
|
||||
--solid-blue: 218 236 255;
|
||||
--solid-iris: 230 231 255;
|
||||
|
||||
--alpha-1: 67, 67, 67, 0.06;
|
||||
--alpha-2: 201, 202, 207, 0.15;
|
||||
--alpha-3: 255, 255, 255, 0.96;
|
||||
--black-alpha-1: 0, 0, 0, 0.12;
|
||||
--black-alpha-2: 0, 0, 0, 0.04;
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--white-alpha: 255, 255, 255, 0.8;
|
||||
}
|
||||
|
||||
.dark {
|
||||
// slate
|
||||
--slate-1: 17 17 19;
|
||||
--slate-2: 24 25 27;
|
||||
--slate-3: 33 34 37;
|
||||
--slate-4: 39 42 45;
|
||||
--slate-5: 46 49 53;
|
||||
--slate-6: 54 58 63;
|
||||
--slate-7: 67 72 78;
|
||||
--slate-8: 90 97 105;
|
||||
--slate-9: 105 110 119;
|
||||
--slate-10: 119 123 132;
|
||||
--slate-11: 176 180 186;
|
||||
--slate-12: 237 238 240;
|
||||
|
||||
// iris
|
||||
--iris-1: 19 19 30;
|
||||
--iris-2: 23 22 37;
|
||||
--iris-3: 32 34 72;
|
||||
--iris-4: 38 42 101;
|
||||
--iris-5: 48 51 116;
|
||||
--iris-6: 61 62 130;
|
||||
--iris-7: 74 74 149;
|
||||
--iris-8: 89 88 177;
|
||||
--iris-9: 91 91 214;
|
||||
--iris-10: 84 114 228;
|
||||
--iris-11: 158 177 255;
|
||||
--iris-12: 224 223 254;
|
||||
|
||||
// ruby
|
||||
--ruby-1: 25 17 19;
|
||||
--ruby-2: 30 21 23;
|
||||
--ruby-3: 58 20 30;
|
||||
--ruby-4: 78 19 37;
|
||||
--ruby-5: 94 26 46;
|
||||
--ruby-6: 111 37 57;
|
||||
--ruby-7: 136 52 71;
|
||||
--ruby-8: 179 68 90;
|
||||
--ruby-9: 229 70 102;
|
||||
--ruby-10: 236 90 114;
|
||||
--ruby-11: 255 148 157;
|
||||
--ruby-12: 254 210 225;
|
||||
|
||||
// amber
|
||||
--amber-1: 22 18 12;
|
||||
--amber-2: 29 24 15;
|
||||
--amber-3: 48 32 8;
|
||||
--amber-4: 63 39 0;
|
||||
--amber-5: 77 48 0;
|
||||
--amber-6: 92 61 5;
|
||||
--amber-7: 113 79 25;
|
||||
--amber-8: 143 100 36;
|
||||
--amber-9: 255 197 61;
|
||||
--amber-10: 255 214 10;
|
||||
--amber-11: 255 202 22;
|
||||
--amber-12: 255 231 179;
|
||||
|
||||
// teal
|
||||
--teal-1: 13 21 20;
|
||||
--teal-2: 17 28 27;
|
||||
--teal-3: 13 45 42;
|
||||
--teal-4: 2 59 55;
|
||||
--teal-5: 8 72 67;
|
||||
--teal-6: 20 87 80;
|
||||
--teal-7: 28 105 97;
|
||||
--teal-8: 32 126 115;
|
||||
--teal-9: 18 165 148;
|
||||
--teal-10: 14 179 158;
|
||||
--teal-11: 11 216 182;
|
||||
--teal-12: 173 240 221;
|
||||
|
||||
// gray
|
||||
--gray-1: 17 17 17;
|
||||
--gray-2: 25 25 25;
|
||||
--gray-3: 34 34 34;
|
||||
--gray-4: 42 42 42;
|
||||
--gray-5: 49 49 49;
|
||||
--gray-6: 58 58 58;
|
||||
--gray-7: 72 72 72;
|
||||
--gray-8: 96 96 96;
|
||||
--gray-9: 110 110 110;
|
||||
--gray-10: 123 123 123;
|
||||
--gray-11: 180 180 180;
|
||||
--gray-12: 238 238 238;
|
||||
|
||||
--background-color: 18 18 19;
|
||||
--border-strong: 52 52 52;
|
||||
--border-weak: 38 38 42;
|
||||
--solid-1: 23 23 26;
|
||||
--solid-2: 29 30 36;
|
||||
--solid-3: 44 45 54;
|
||||
--solid-active: 53 57 66;
|
||||
--solid-amber: 42 37 30;
|
||||
--solid-blue: 16 49 91;
|
||||
--solid-iris: 38 42 101;
|
||||
--text-blue: 126 182 255;
|
||||
|
||||
--alpha-1: 36, 36, 36, 0.8;
|
||||
--alpha-2: 139, 147, 182, 0.15;
|
||||
--alpha-3: 36, 38, 45, 0.9;
|
||||
--black-alpha-1: 0, 0, 0, 0.3;
|
||||
--black-alpha-2: 0, 0, 0, 0.2;
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--border-container: 236, 236, 236, 0;
|
||||
--white-alpha: 255, 255, 255, 0.1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user