scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-04 19:05:37 +08:00
Code Issues Projects Releases Packages Wiki Activity

New color mapping [SCI-8339]

Browse source
This commit is contained in:
Anton 2023-05-05 14:05:17 +02:00
parent ef8a518a83
commit f48e09786e
4 changed files with 72 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
app/assets/stylesheets/shared_styles/constants/colors.scss
View file

@ -1,17 +1,72 @@
$colors: ("sn-white": "#FFFFFF",
"sn-super-light-grey": "#F9F9F9",
"sn-light-grey": "#EAECF0",
"sn-sleepy-grey": "#D0D5DD",
"sn-grey": "#98A2B3",
"sn-dark-grey": "#475467",
"sn-black": "#1D2939",
"sn-blue": "#104DA9",
"sn-science-blue": "#3B99FD",
"sn-super-light-blue": "#F0F8FF",
"sn-blue-hover": "#2D5FAA",
"sn-science-blue-hover": "#79B4F3",
"sn-alert-green": "#5EC66F",
"sn-alert-violet": "#6F2DC1",
"sn-alert-brittlebush": "#E9A845",
"sn-alert-passion": "#DF3562",
"sn-alert-turqoise": "#46C3C8",
"sn-alert-bloo": "#3070ED",
"sn-alert-blue-disabled": "#87A6D4",
"sn-alert-green-disabled": "#AEE3B7",
"sn-alert-violet-disabled": "#B796E0",
"sn-alert-brittlebush-disabled": "#F4D3A2",
"sn-alert-passion-disabled": "#EF9AB0",
"sn-alert-turqoise-disabled": "#A2E1E3",
"sn-alert-science-blue-disabled": "#9DCCFE",
"sn-delete-red": "#CE0C24",
"sn-delete-red-hover": "#AD0015",
"sn-coral": "#FB565B",
"sn-background-blue": "#DBE4F2",
"sn-background-green": "#E7F7E9",
"sn-background-violet": "#E9DFF6",
"sn-background-brittlebush": "#FCF2E3",
"sn-background-passion": "#FAE1E7",
"sn-background-turqoise": "#E3F6F7",
"sn-background-bloo": "#E2F0FF");
:root {
@each $color, $value in $colors {
--#{$color}: #{$value};
}
}
@each $color, $value in $colors {
.bg-#{$color} {
background-color: var(--#{$color});
}
.text-#{$color} {
color: var(--#{$color});
}
}
// LEGACY COLORS
// Grayscale colors
$color-white: #fff;
$color-concrete: #f0f0f6;
$color-alto: #d0d0d8;
$color-silver-chalice: #a0a0a8;
$color-volcano: #404048;
$color-black: #231f20;
$color-concrete: #eaecf0;
$color-alto: #d0d5dd;
$color-silver-chalice: #98a2b3;
$color-volcano: #475467;
$color-black: #1d2939;
$color-transparent: rgba(255, 255, 255, 0);
$color-gray: #adadad;
// Theme colors
$brand-primary: #104da9;
$brand-primary-hover: #0c3a80;
$brand-primary-hover: #2d5faa;
$brand-primary-press: #07244f;
$brand-primary-light: #7094cb;
@ -20,14 +75,14 @@ $brand-academy-dark: #8c1b58;
$brand-accent: #ffcf26;
$brand-focus: #609fff;
$brand-focus-light: #dfecff;
$brand-focus: #3b99fd;
$brand-focus-light: #f0f8ff;
$brand-success: #2dbe61;
$brand-success: #5ec66f;
$brand-success-light: #cbefd7;
$brand-danger: #e72525;
$brand-danger-hover: #b21d1d;
$brand-danger: #ce0c24;
$brand-danger-hover: #ad0015;
$brand-danger-press: #801515;
$brand-danger-light: #f9c9c9;
@ -48,7 +103,7 @@ $bio-eddie-color: #ffa000;
$pdf-color: #f40f02;
// Don't use them
// Don"t use them
$color-alabaster: $color-concrete;
$color-gainsboro: $color-concrete;
$color-silver: $color-alto;
@ -62,73 +117,3 @@ $brand-light-blue: $brand-focus-light;
// This color was removed from constants, but it is still in use for DD hover. Need it for button in DD
$color-dd-hover: #f5f5f5;
// pure css variables
:root {
// main colors
--sn-white: #FFFFFF;
--sn-super-light-grey: #F9F9F9;
--sn-light-grey: #EAECF0;
--sn-sleepy-grey: #EAECF0;
--sn-grey: #98A2B3;
--sn-dark-grey: #475467;
--sn-black: #1D2939;
--sn-blue: #104DA9;
--sn-science-blue: #3B99FD;
--sn-super-light-blue: #F0F8FF;
--sn-blue-hover: #2D5FAA;
--sn-science-blue-hover: #79B4F3;
// alert colors
--sn-alert-green: #5EC66F;
--sn-alert-violet: #6F2DC1;
--sn-alert-brittlebush: #E9A845;
--sn-alert-passion: #DF3562;
--sn-alert-turqoise: #46C3C8;
--sn-alert-bloo: #3070ED;
// disabled alert colors
--sn-alert-blue-disabled: #87A6D4;
--sn-alert-green-disabled: #AEE3B7;
--sn-alert-violet-disabled: #B796E0;
--sn-alert-brittlebush-disabled: #F4D3A2;
--sn-alert-passion-disabled: #EF9AB0;
--sn-alert-turqoise-disabled: #A2E1E3;
--sn-alert-science-blue-disabled: #9DCCFE;
// delete colors
--sn-delete-red: #CE0C24;
--sn-delete-red-hover: #AD0015;
// notification sn-science-blue included
--sn-coral: #FB565B;
// background colors
--sn-background-blue: #DBE4F2;
--sn-background-green: #E7F7E9;
--sn-background-violet: #E9DFF6;
--sn-background-brittlebush: #FCF2E3;
--sn-background-passion: #FAE1E7;
--sn-background-turqoise: #E3F6F7;
--sn-background-bloo: #E2F0FF;
}
.sn-color--sn-blue {
color: var(--sn-blue);
}
.sn-color--sn-grey {
color: var(--sn-grey);
}
.sn-background--sn-light-grey {
background-color: var(--sn-light-grey);
}
.sn-background--sn-sleepy-grey {
background-color: var(--sn-sleepy-grey);
}
.sn-background--sn-white {
background-color: var(--sn-white);
}

2
app/javascript/vue/navigation/navigator.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-72 h-full border rounded sn-background--sn-white flex flex-col right-0 absolute navigator-container">
<div class="w-72 h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="p-3 flex items-center">
<i class="fas fa-bars p-2 cursor-pointer"></i>
<div class="font-bold text-base">

6
app/javascript/vue/navigation/navigator_item.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="sn-color--sn-blue pl-7 w-64 flex justify-center flex-col" :navigator-item-id="item.id">
<div class="p-2 flex items-center whitespace-nowrap" :class="{ 'sn-background--sn-light-grey': activeItem }">
<div class="text-sn-blue pl-7 w-64 flex justify-center flex-col" :navigator-item-id="item.id">
<div class="p-2 flex items-center whitespace-nowrap" :class="{ 'bg-sn-light-grey': activeItem }">
<div class="w-5 mr-2 flex justify-start shrink-0">
<i v-if="hasChildren"
class="fas cursor-pointer"
@ -11,7 +11,7 @@
class="text-ellipsis overflow-hidden hover:no-underline"
:class="{
'pointer-events-none': (!item.archived && archived),
'sn-color--sn-grey': (!item.archived && archived)
'text-sn-grey': (!item.archived && archived)
}">
<i v-if="itemIcon" class="mr-2" :class="itemIcon"></i>
<template v-if="item.archived">(A)</template>

37
config/tailwind.config.js
View file

@ -15,42 +15,7 @@ module.exports = {
},
colors: {
transparent: 'transparent',
current: 'currentColor',
'sn-white': '#FFFFFF',
'sn-super-light-grey': '#F9F9F9',
'sn-light-grey': '#EAECF0',
'sn-sleepy-grey': '#EAECF0',
'sn-grey': '#98A2B3',
'sn-dark-grey': '#475467',
'sn-black': '#1D2939',
'sn-blue': '#104DA9',
'sn-science-blue': '#3B99FD',
'sn-super-light-blue': '#F0F8FF',
'sn-blue-hover': '#2D5FAA',
'sn-science-blue-hover': '#79B4F3',
'sn-alert-green': '#5EC66F',
'sn-alert-violet': '#6F2DC1',
'sn-alert-brittlebush': '#E9A845',
'sn-alert-passion': '#DF3562',
'sn-alert-turqoise': '#46C3C8',
'sn-alert-bloo': '#3070ED',
'sn-alert-blue-disabled': '#87A6D4',
'sn-alert-green-disabled': '#AEE3B7',
'sn-alert-violet-disabled': '#B796E0',
'sn-alert-brittlebush-disabled': '#F4D3A2',
'sn-alert-passion-disabled': '#EF9AB0',
'sn-alert-turqoise-disabled': '#A2E1E3',
'sn-alert-science-blue-disabled': '#9DCCFE',
'sn-delete-red': '#CE0C24',
'sn-delete-red-hover': '#AD0015',
'sn-coral': '#FB565B',
'sn-background-blue': '#DBE4F2',
'sn-background-green': '#E7F7E9',
'sn-background-violet': '#E9DFF6',
'sn-background-brittlebush': '#FCF2E3',
'sn-background-passion': '#FAE1E7',
'sn-background-turqoise': '#E3F6F7',
'sn-background-bloo': '#E2F0FF'
current: 'currentColor'
}
}
},