Color tokens (#16107)
This commit is contained in:
ludwiczakpawel
GitHub
parent
6099d3640d
commit
87ff8f16a1
34 changed files with 398 additions and 495 deletions
|
|
@ -57,7 +57,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,10 +86,10 @@ body {
|
|||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-brand);
|
||||
color: var(--link-branded-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-brand-darker);
|
||||
color: var(--link-branded-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -151,10 +151,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--bg-hover: var(--button-secondary-bg-hover);
|
||||
--color: var(--button-secondary-color);
|
||||
--color-hover: var(--button-secondary-color-hover);
|
||||
--bg-inverted: var(--button-secondary-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-secondary-inverted-bg-hover);
|
||||
--color-inverted: var(--button-secondary-inverted-color);
|
||||
--color-inverted-hover: var(--button-secondary-inverted-color-hover);
|
||||
}
|
||||
|
||||
.crayons-btn--outlined {
|
||||
|
|
@ -164,12 +160,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--border-hover: var(--button-outlined-border-hover);
|
||||
--color: var(--button-outlined-color);
|
||||
--color-hover: var(--button-outlined-color-hover);
|
||||
--bg-inverted: var(--button-outlined-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-outlined-inverted-bg-hover);
|
||||
--border-inverted: var(--button-outlined-inverted-border);
|
||||
--border-inverted-hover: var(--button-outlined-inverted-border-hover);
|
||||
--color-inverted: var(--button-outlined-inverted-color);
|
||||
--color-inverted-hover: var(--button-outlined-inverted-color-hover);
|
||||
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
|
@ -204,10 +194,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--color-hover: var(--accent-brand-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-brand-lighter);
|
||||
--color-inverted-hover: var(--accent-brand-lighter);
|
||||
}
|
||||
|
||||
&-dimmed {
|
||||
|
|
@ -217,10 +203,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--color-hover: var(--button-ghost-dimmed-color-hover);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-ghost-dimmed-inverted-color);
|
||||
--color-inverted-hover: var(--accent-ghost-dimmed-inverted-color-hover);
|
||||
}
|
||||
|
||||
&-success {
|
||||
|
|
@ -236,19 +218,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--color-inverted-hover: var(--accent-success-darker);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--accent-warning);
|
||||
--color-hover: var(--accent-warning-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-warning);
|
||||
--color-inverted-hover: var(--accent-warning-darker);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
|
|
@ -256,10 +225,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
|
|||
--color-hover: var(--accent-danger-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-danger);
|
||||
--color-inverted-hover: var(--accent-danger-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
}
|
||||
|
||||
&--elevated {
|
||||
box-shadow: 0 0 0 1px var(--card-secondary-border), 0 1px 3px var(--base-a5),
|
||||
0 3px 9px var(--base-a5);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
&--content-rows {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
}
|
||||
|
||||
a[aria-current='page'] {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
vertical-align: middle;
|
||||
display: none;
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
|
||||
a[aria-current='page'] + .check-icon {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
z-index: var(--z-dropdown);
|
||||
background: var(--card-bg);
|
||||
color: var(--card-color);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
|
||||
box-shadow: var(--shadow-1);
|
||||
border-radius: var(--radius);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
align-items: center;
|
||||
padding: 0 var(--su-2) 0 var(--su-4);
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--base-a10);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.c-indicator {
|
||||
--bg: var(--badge-bg);
|
||||
--color: var(--badge-color);
|
||||
--bg: var(--indicator-bg);
|
||||
--color: var(--indicator-color);
|
||||
padding: var(--su-1);
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
|
@ -12,23 +12,23 @@
|
|||
min-width: var(--su-2);
|
||||
|
||||
&--success {
|
||||
--bg: var(--badge-success-bg);
|
||||
--color: var(--badge-success-color);
|
||||
--bg: var(--indicator-success-bg);
|
||||
--color: var(--indicator-success-color);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
--bg: var(--badge-warning-bg);
|
||||
--color: var(--badge-warning-color);
|
||||
--bg: var(--indicator-warning-bg);
|
||||
--color: var(--indicator-warning-color);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
--bg: var(--badge-danger-bg);
|
||||
--color: var(--badge-danger-color);
|
||||
--bg: var(--indicator-danger-bg);
|
||||
--color: var(--indicator-danger-color);
|
||||
}
|
||||
|
||||
&--info {
|
||||
--bg: var(--badge-info-bg);
|
||||
--color: var(--badge-info-color);
|
||||
--bg: var(--indicator-info-bg);
|
||||
--color: var(--indicator-info-color);
|
||||
}
|
||||
|
||||
&--relaxed {
|
||||
|
|
|
|||
|
|
@ -40,8 +40,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
|
||||
box-shadow: var(--shadow-1);
|
||||
color: var(--link-color-hover);
|
||||
|
||||
small {
|
||||
|
|
|
|||
|
|
@ -62,8 +62,7 @@
|
|||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
border-radius: var(--radius-large-auto);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
|
||||
box-shadow: var(--shadow-2);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
background: var(--card-bg);
|
||||
|
|
|
|||
|
|
@ -8,34 +8,10 @@
|
|||
}
|
||||
|
||||
&--brand {
|
||||
color: var(--accent-brand);
|
||||
color: var(--link-branded-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-brand-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: var(--accent-success);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-success-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: var(--accent-warning);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-warning-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: var(--accent-danger);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-danger-darker);
|
||||
color: var(--link-branded-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,14 +30,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.crayons-link--header {
|
||||
color: var(--link-color);
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: var(--su-2);
|
||||
margin-bottom: var(--su-2);
|
||||
}
|
||||
|
||||
.crayons-link--block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@
|
|||
}
|
||||
|
||||
&--info {
|
||||
background: var(--accent-brand-a10);
|
||||
background: rgba(var(--brand), 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
|
||||
&__comments {
|
||||
cursor: default;
|
||||
background: RGB(var(--story-comments-bg));
|
||||
background: var(--story-comments-bg);
|
||||
border-radius: var(--radius);
|
||||
position: relative;
|
||||
bottom: var(--su-2);
|
||||
|
|
|
|||
|
|
@ -108,32 +108,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--pills {
|
||||
.crayons-tabs__item--current {
|
||||
background: var(--tab-bg-current);
|
||||
color: var(--tab-pill-color-current);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--stacked {
|
||||
flex-direction: column;
|
||||
@media (min-width: $breakpoint-s) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.crayons-tabs__item {
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
margin: 0 var(--su-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--wrapped {
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
@ -148,28 +122,6 @@
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&--muted {
|
||||
.crayons-tabs__item {
|
||||
color: var(--tab-muted-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--tab-muted-color-hover);
|
||||
background: var(--tab-muted-bg-hover);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: var(--tab-muted-bg-current);
|
||||
}
|
||||
}
|
||||
|
||||
&.crayons-tabs--pills {
|
||||
.crayons-tabs__item--current {
|
||||
color: var(--tab-muted-color-current);
|
||||
background: var(--tab-muted-bg-current);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-navigation {
|
||||
|
|
@ -180,7 +132,7 @@
|
|||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
// !important here because reset.scss is screwed up a little for ul,ol elements... gotta fix it one day...
|
||||
padding: var(--su-1) 0 !important; // padding to improve tapable
|
||||
padding: var(--su-1) 0 !important; // padding to improve tapping area
|
||||
margin: calc(-1 * var(--su-1)) 0 !important;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
|
|
@ -204,7 +156,7 @@
|
|||
|
||||
&:hover {
|
||||
color: var(--accent-brand);
|
||||
background: var(--base-inverted-a50);
|
||||
background: var(--base-inverted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,7 +195,7 @@
|
|||
background: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--base-inverted-a50);
|
||||
background: var(--base-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
@import '../config/import';
|
||||
|
||||
.crayons-tag {
|
||||
--tag-bg: var(--base-a5);
|
||||
--tag-prefix: var(--base-a60);
|
||||
|
||||
--tag-bg-hover: var(--base-a5);
|
||||
--tag-prefix-hover: var(--base);
|
||||
|
||||
background: transparent;
|
||||
color: var(--base-80);
|
||||
color: var(--tag-color);
|
||||
border-radius: var(--radius);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -25,19 +19,19 @@
|
|||
|
||||
&--filled {
|
||||
background: var(--tag-bg);
|
||||
color: var(--base-90);
|
||||
color: var(--tag-color-hover);
|
||||
}
|
||||
|
||||
&--monochrome {
|
||||
.crayons-tag__prefix {
|
||||
color: var(--base-a60);
|
||||
color: var(--tag-prefix);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--tag-bg-hover);
|
||||
color: var(--base);
|
||||
color: var(--tag-color-hover);
|
||||
box-shadow: inset 0 0 0 1px var(--tag-bg-hover),
|
||||
inset 0 0 0 1px var(--tag-bg-hover), inset 0 0 0 1px var(--tag-bg-hover);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translate(-50%, calc(-1 * var(--su-1)));
|
||||
background: var(--base-a90);
|
||||
color: var(--base-inverted);
|
||||
background: var(--tooltip-bg);
|
||||
color: var(--tooltip-color);
|
||||
font-size: var(--fs-s);
|
||||
font-family: var(--ff-sans-serif);
|
||||
font-weight: var(--fw-normal);
|
||||
|
|
|
|||
|
|
@ -1,21 +1,7 @@
|
|||
/***********************************************
|
||||
** Colors. *************************************
|
||||
************************************************
|
||||
/*
|
||||
All --base-* and --accent-* color variables will be used to generate
|
||||
Utility-First Classes/ (see config/import.scss & base/colors.scss for
|
||||
reference). Other color variables are more functional and define usage
|
||||
of particular colors in components and views.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/***********************************************
|
||||
** Fundamental color variables. ****************
|
||||
***********************************************/
|
||||
|
||||
/* Base */
|
||||
--base: #090909;
|
||||
--base-inverted: #fff;
|
||||
--base-inverted: rgb(var(--white));
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #242424;
|
||||
|
|
@ -29,84 +15,58 @@ of particular colors in components and views.
|
|||
--base-10: #efefef;
|
||||
--base-0: #f9f9f9;
|
||||
|
||||
--base-a90: rgba(9, 9, 9, 0.9);
|
||||
--base-a80: rgba(9, 9, 9, 0.8);
|
||||
--base-a70: rgba(9, 9, 9, 0.7);
|
||||
--base-a60: rgba(9, 9, 9, 0.6);
|
||||
--base-a50: rgba(9, 9, 9, 0.5);
|
||||
--base-a40: rgba(9, 9, 9, 0.4);
|
||||
--base-a30: rgba(9, 9, 9, 0.3);
|
||||
--base-a20: rgba(9, 9, 9, 0.2);
|
||||
--base-a10: rgba(9, 9, 9, 0.1);
|
||||
--base-a5: rgba(9, 9, 9, 0.05);
|
||||
|
||||
--base-inverted-a90: rgba(255, 255, 255, 0.9);
|
||||
--base-inverted-a80: rgba(255, 255, 255, 0.8);
|
||||
--base-inverted-a70: rgba(255, 255, 255, 0.7);
|
||||
--base-inverted-a60: rgba(255, 255, 255, 0.6);
|
||||
--base-inverted-a50: rgba(255, 255, 255, 0.5);
|
||||
--base-inverted-a40: rgba(255, 255, 255, 0.4);
|
||||
--base-inverted-a30: rgba(255, 255, 255, 0.3);
|
||||
--base-inverted-a20: rgba(255, 255, 255, 0.2);
|
||||
--base-inverted-a10: rgba(255, 255, 255, 0.1);
|
||||
--base-inverted-a5: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Accent colors */
|
||||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: rgba(59, 73, 223, 0.1);
|
||||
/* Brand */
|
||||
--accent-brand-lighter: rgb(var(--accent-brand-lighter-rgb));
|
||||
--accent-brand: rgb(var(--accent-brand-rgb));
|
||||
--accent-brand-darker: rgb(var(--accent-brand-darker-rgb));
|
||||
|
||||
/* Success */
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: rgba(38, 217, 202, 0.1);
|
||||
--accent-success: rgb(var(--green-600));
|
||||
--accent-success-darker: rgb(var(--green-700));
|
||||
--accent-success-lighter: rgb(var(--green-500));
|
||||
--accent-success-a10: rgba(var(--green-600), 0.1);
|
||||
|
||||
/* Warning */
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: rgba(255, 207, 76, 0.1);
|
||||
--accent-warning: rgb(var(--yellow-500));
|
||||
--accent-warning-darker: rgb(var(--yellow-600));
|
||||
--accent-warning-lighter: rgb(var(--yellow-400));
|
||||
--accent-warning-a10: rgba(var(--yellow-500), 0.1);
|
||||
|
||||
/* Danger */
|
||||
--accent-danger: #d31616;
|
||||
--accent-danger-darker: #b90909;
|
||||
--accent-danger-lighter: #ec4646;
|
||||
--accent-danger-a10: rgba(211, 22, 22, 0.1);
|
||||
--accent-danger: rgb(var(--red-600));
|
||||
--accent-danger-darker: rgb(var(--red-700));
|
||||
--accent-danger-lighter: rgb(var(--red-500));
|
||||
--accent-danger-a10: rgba(var(--red-600), 0.1);
|
||||
|
||||
/***********************************************
|
||||
** Functional color variables. *****************
|
||||
***********************************************/
|
||||
|
||||
--body-bg: var(--base-10);
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
/* Main colors */
|
||||
--body-bg: rgb(var(--grey-100));
|
||||
--body-color: rgb(var(--grey-900));
|
||||
--body-color-inverted: rgb(var(--white));
|
||||
|
||||
/* Main content containers */
|
||||
--card-bg: var(--base-inverted);
|
||||
--card-color: var(--base-100);
|
||||
--card-color-secondary: var(--base-70);
|
||||
--card-color-tertiary: var(--base-60);
|
||||
--card-secondary-bg: var(--base-0);
|
||||
--card-secondary-color: var(--base-90);
|
||||
--card-headline-color: var(--base-100);
|
||||
--card-border: var(--base-a10);
|
||||
--card-secondary-border: var(--base-a5);
|
||||
--card-hover-bg: var(--base-10);
|
||||
--card-selected-bg: var(--base-20);
|
||||
--card-bg: rgb(var(--white));
|
||||
--card-color: rgb(var(--grey-900));
|
||||
--card-color-secondary: rgb(var(--grey-700));
|
||||
--card-color-tertiary: rgb(var(--grey-600));
|
||||
--card-secondary-bg: rgb(var(--grey-50));
|
||||
--card-secondary-color: rgb(var(--grey-700));
|
||||
--card-border: rgba(var(--grey-900), 0.1);
|
||||
--card-secondary-border: rgba(var(--grey-900), 0.05);
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--base-inverted);
|
||||
--header-shadow: rgba(0, 0, 0, 0.1);
|
||||
--header-bg: rgb(var(--white));
|
||||
--header-shadow: rgba(var(--black), 0.1);
|
||||
|
||||
/* Footer */
|
||||
--footer-bg: var(--base-20);
|
||||
--footer-color: var(--base-80);
|
||||
--footer-bg: rgb(var(--grey-200));
|
||||
--footer-color: rgb(var(--grey-700));
|
||||
|
||||
/* Links */
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-60);
|
||||
--link-color-secondary-hover: var(--base-70);
|
||||
|
|
@ -117,7 +77,7 @@ of particular colors in components and views.
|
|||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
/* //-- Inverted */
|
||||
/* -- Inverted */
|
||||
--button-primary-inverted-bg: var(--accent-brand);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
|
|
@ -128,11 +88,6 @@ of particular colors in components and views.
|
|||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
/* //-- Inverted */
|
||||
--button-secondary-inverted-bg: var(--base-70);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
/* Outlined buttons */
|
||||
--button-outlined-bg: transparent;
|
||||
|
|
@ -141,13 +96,6 @@ of particular colors in components and views.
|
|||
--button-outlined-border-hover: var(--base-40);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
/* //-- Inverted */
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
/* Ghost buttons */
|
||||
--button-ghost-bg: transparent;
|
||||
|
|
@ -156,7 +104,7 @@ of particular colors in components and views.
|
|||
--button-ghost-color-hover: var(--base-100);
|
||||
--button-ghost-dimmed-color: var(--base-60);
|
||||
--button-ghost-dimmed-color-hover: var(--base-100);
|
||||
/* //-- Inverted */
|
||||
/* -- Inverted */
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
|
|
@ -165,63 +113,53 @@ of particular colors in components and views.
|
|||
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
|
||||
|
||||
/* Forms */
|
||||
--form-bg: var(--base-inverted);
|
||||
--form-bg-focus: var(--base-inverted);
|
||||
--form-border: var(--base-20);
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
--form-bg: rgb(var(--white));
|
||||
--form-bg-focus: rgb(var(--white));
|
||||
--form-border: rgb(var(--grey-300));
|
||||
--form-border-hover: rgb(var(--grey-400));
|
||||
--form-border-focus: var(--focus);
|
||||
--form-placeholder-color: rgb(var(--grey-600));
|
||||
|
||||
/* Form labels */
|
||||
--label-primary: var(--base-90);
|
||||
--label-secondary: var(--base-60);
|
||||
--label-primary: rgb(var(--grey-900));
|
||||
--label-secondary: rgb(var(--grey-600));
|
||||
|
||||
/* Snackbars */
|
||||
--snackbar-bg: var(--base-90);
|
||||
--snackbar-color: var(--body-color-inverted);
|
||||
|
||||
/* Indicators */
|
||||
--indicator-accent-bg: var(--accent-brand);
|
||||
--indicator-accent-color: var(--body-color-inverted);
|
||||
--indicator-critical-bg: var(--accent-danger);
|
||||
--indicator-critical-color: var(--body-color-inverted);
|
||||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
--snackbar-bg: rgb(var(--grey-900));
|
||||
--snackbar-color: rgb(var(--white));
|
||||
|
||||
/* Tabs */
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color: rgb(var(--grey-700));
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
--tab-color-current: rgb(var(--grey-900));
|
||||
--tab-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--tab-bg-current: rgb(var(--accent-brand));
|
||||
|
||||
/* Tags */
|
||||
--tag-color: var(--base-60);
|
||||
--tag-color-hover: var(--base-100);
|
||||
--tag-color: rgb(var(--grey-700));
|
||||
--tag-color-hover: rgb(var(--grey-900));
|
||||
--tag-bg: rgba(var(--grey-900), 0.05);
|
||||
--tag-bg-hover: rgba(var(--grey-900), 0.05);
|
||||
--tag-prefix: rgba(var(--grey-900), 0.6);
|
||||
--tag-prefix-hover: rgb(var(--grey-900));
|
||||
|
||||
/* Story */
|
||||
--story-comments-bg: 249, 249, 249;
|
||||
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
||||
--story-comments-bg: rgb(var(--grey-50));
|
||||
--story-comments-bg-top: rgba(var(--grey-50), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--grey-50), 1);
|
||||
|
||||
/* Select icon */
|
||||
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
|
||||
|
||||
/* Reactions */
|
||||
--reaction-like-color: var(--accent-danger);
|
||||
--reaction-like-bg: var(--accent-danger-a10);
|
||||
--reaction-custom-color: var(--accent-success);
|
||||
--reaction-custom-bg: var(--accent-success-a10);
|
||||
--reaction-save-color: var(--accent-brand);
|
||||
--reaction-save-bg: var(--accent-brand-a10);
|
||||
--reaction-comment-color: var(--accent-warning);
|
||||
--reaction-comment-bg: var(--accent-warning-a10);
|
||||
--reaction-like-color: rgb(var(--red-600));
|
||||
--reaction-like-bg: rgba(var(--red-600), 0.1);
|
||||
--reaction-custom-color: rgb(var(--green-600));
|
||||
--reaction-custom-bg: rgb(var(--green-600), 0.1);
|
||||
--reaction-save-color: rgb(var(--indigo-600));
|
||||
--reaction-save-bg: rgba(var(--indigo-600), 0.1);
|
||||
--reaction-comment-color: rgb(var(--yellow-500));
|
||||
--reaction-comment-bg: rgba(var(--yellow-500), 0.1);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -237,36 +175,36 @@ of particular colors in components and views.
|
|||
|
||||
/* Buttons: Default */
|
||||
--btn-bg: transparent;
|
||||
--btn-bg-hover: var(--accent-brand-a10);
|
||||
--btn-color: var(--base-80);
|
||||
--btn-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--btn-color: rgb(var(--grey-800));
|
||||
--btn-color-hover: var(--accent-brand-darker);
|
||||
|
||||
--btn-current-bg: var(--base-20);
|
||||
--btn-current-color: var(--base-100);
|
||||
--btn-current-bg: rgb(var(--grey-200));
|
||||
--btn-current-color: rgb(var(--grey-900));
|
||||
|
||||
/* Buttons: Primary */
|
||||
--btn-primary-bg: var(--accent-brand);
|
||||
--btn-primary-bg-hover: var(--accent-brand-darker);
|
||||
--btn-primary-color: var(--base-inverted);
|
||||
--btn-primary-color-hover: var(--base-inverted);
|
||||
--btn-primary-color: rgb(var(--white));
|
||||
--btn-primary-color-hover: rgb(var(--white));
|
||||
|
||||
/* Buttons: Secondary */
|
||||
--btn-secondary-bg: var(--accent-brand-a10);
|
||||
--btn-secondary-bg: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--btn-secondary-bg-hover: var(--accent-brand);
|
||||
--btn-secondary-color: var(--accent-brand);
|
||||
--btn-secondary-color-hover: var(--base-inverted);
|
||||
--btn-secondary-color-hover: rgb(var(--white));
|
||||
|
||||
/* Buttons: Destructive Default */
|
||||
--btn-destructive-bg: transparent;
|
||||
--btn-destructive-bg-hover: var(--accent-danger-a10);
|
||||
--btn-destructive-color: var(--accent-danger);
|
||||
--btn-destructive-color-hover: var(--accent-danger-darker);
|
||||
--btn-destructive-bg-hover: rgba(var(--red-600), 0.1);
|
||||
--btn-destructive-color: rgb(var(--red-700));
|
||||
--btn-destructive-color-hover: rgb(var(--red-800));
|
||||
|
||||
/* Buttons: Destructive Primary */
|
||||
--btn-primary-destructive-bg: var(--accent-danger);
|
||||
--btn-primary-destructive-bg-hover: var(--accent-danger-darker);
|
||||
--btn-primary-destructive-color: var(--base-inverted);
|
||||
--btn-primary-destructive-color-hover: var(--base-inverted);
|
||||
--btn-primary-destructive-bg: var(--red-600);
|
||||
--btn-primary-destructive-bg-hover: var(--red-700);
|
||||
--btn-primary-destructive-color: rgb(var(--white));
|
||||
--btn-primary-destructive-color-hover: rgb(var(--white));
|
||||
|
||||
/***********************************************
|
||||
** Links ***************************************
|
||||
|
|
@ -274,16 +212,16 @@ of particular colors in components and views.
|
|||
|
||||
/* Links: Default */
|
||||
--link-bg: transparent;
|
||||
--link-bg-hover: var(--accent-brand-a10);
|
||||
--link-color: var(--base-80);
|
||||
--link-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--link-color: rgb(var(--grey-700));
|
||||
--link-color-hover: var(--accent-brand-darker);
|
||||
|
||||
--link-current-bg: var(--base-20);
|
||||
--link-current-color: var(--base-100);
|
||||
--link-current-bg: rgb(var(--grey-200));
|
||||
--link-current-color: rgb(var(--grey-900));
|
||||
|
||||
/* Links: Branded */
|
||||
--link-branded-bg: transparent;
|
||||
--link-branded-bg-hover: var(--accent-brand-a10);
|
||||
--link-branded-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--link-branded-color: var(--accent-brand);
|
||||
--link-branded-color-hover: var(--accent-brand-darker);
|
||||
|
||||
|
|
@ -293,47 +231,61 @@ of particular colors in components and views.
|
|||
|
||||
/* CTAs: Default */
|
||||
--cta-bg: transparent;
|
||||
--cta-bg-hover: var(--accent-brand-a10);
|
||||
--cta-color: var(--base-80);
|
||||
--cta-bg-hover: rgba(var(--accent-brand-rgb), 0.1);
|
||||
--cta-color: rgb(var(--grey-800));
|
||||
--cta-color-hover: var(--accent-brand-darker);
|
||||
--cta-border: var(--base-60);
|
||||
--cta-border: rgb(var(--grey-600));
|
||||
--cta-border-hover: var(--accent-brand-darker);
|
||||
|
||||
/* CTAs: Branded */
|
||||
--cta-branded-bg: transparent;
|
||||
--cta-branded-bg-hover: var(--accent-brand);
|
||||
--cta-branded-color: var(--accent-brand);
|
||||
--cta-branded-color-hover: var(--base-inverted);
|
||||
--cta-branded-color-hover: rgb(var(--white));
|
||||
--cta-branded-border: var(--accent-brand);
|
||||
--cta-branded-border-hover: var(--accent-brand-darker);
|
||||
|
||||
/***********************************************
|
||||
** Badges **************************************
|
||||
** Tooltips ************************************
|
||||
***********************************************/
|
||||
|
||||
/* Badges: Default */
|
||||
--badge-bg: var(--base-30);
|
||||
--badge-color: var(--base-80);
|
||||
--tooltip-bg: rgba(var(--grey-900), 0.9);
|
||||
--tooltip-color: rgb(var(--white));
|
||||
|
||||
/***********************************************
|
||||
** Indicators **********************************
|
||||
***********************************************/
|
||||
|
||||
/* Badges: Success */
|
||||
--badge-success-bg: var(--accent-success);
|
||||
--badge-success-color: rgb(0,0,0);
|
||||
/* Indicators: Default */
|
||||
--indicator-bg: rgb(var(--grey-300));
|
||||
--indicator-color: rgb(var(--grey-700));
|
||||
|
||||
/* Badges: Warning */
|
||||
--badge-warning-bg: var(--accent-warning);
|
||||
--badge-warning-color: rgb(0,0,0);
|
||||
/* Indicators: Success */
|
||||
--indicator-success-bg: rgb(var(--green-400));
|
||||
--indicator-success-color: rgb(var(--green-900));
|
||||
|
||||
/* Badges: Danger */
|
||||
--badge-danger-bg: var(--accent-danger);
|
||||
--badge-danger-color: rgb(255,255,255);
|
||||
/* Indicators: Warning */
|
||||
--indicator-warning-bg: rgb(var(--yellow-300));
|
||||
--indicator-warning-color: rgb(var(--yellow-900));
|
||||
|
||||
/* Badges: Info */
|
||||
--badge-info-bg: var(--accent-brand);
|
||||
--badge-info-color: rgb(255,255,255);
|
||||
/* Indicators: Danger */
|
||||
--indicator-danger-bg: rgb(var(--red-600));
|
||||
--indicator-danger-color: rgb(var(--white));
|
||||
|
||||
/* Indicators: Info */
|
||||
--indicator-info-bg: var(--accent-brand);
|
||||
--indicator-info-color: rgb(var(--white));
|
||||
|
||||
/***********************************************
|
||||
** Utilities ***********************************
|
||||
***********************************************/
|
||||
|
||||
/* Focus */
|
||||
--focus: var(--accent-brand);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-1: 0 10px 15px -3px rgba(var(--black), 0.1),
|
||||
0 4px 6px -2px rgba(var(--black), 0.05), 0 0 0 1px rgba(var(--black), 0.1);
|
||||
--shadow-2: 0 20px 25px -5px rgba(var(--black), 0.1),
|
||||
0 10px 10px -5px rgba(var(--black), 0.05), 0 0 0 1px rgba(var(--black), 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,4 +129,70 @@
|
|||
--z-dropdown: 400; // all kinds of dropdowns
|
||||
--z-modal: 500; // modals
|
||||
--z-popover: 500; // tooltips, snackbars, etc.
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Colors. /////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--white: 255, 255, 255;
|
||||
--black: 0, 0, 0;
|
||||
|
||||
--grey-50: 250, 250, 250;
|
||||
--grey-100: 245, 245, 245;
|
||||
--grey-200: 229, 229, 229;
|
||||
--grey-300: 212, 212, 212;
|
||||
--grey-400: 163, 163, 163;
|
||||
--grey-500: 115, 115, 115;
|
||||
--grey-600: 82, 82, 82;
|
||||
--grey-700: 64, 64, 64;
|
||||
--grey-800: 38, 38, 38;
|
||||
--grey-900: 23, 23, 23;
|
||||
|
||||
--red-50: 254, 242, 242;
|
||||
--red-100: 254, 226, 226;
|
||||
--red-200: 254, 202, 202;
|
||||
--red-300: 252, 165, 165;
|
||||
--red-400: 248, 113, 113;
|
||||
--red-500: 239, 68, 68;
|
||||
--red-600: 220, 38, 38;
|
||||
--red-700: 185, 28, 28;
|
||||
--red-800: 153, 27, 27;
|
||||
--red-900: 127, 29, 29;
|
||||
|
||||
--yellow-50: 255, 251, 235;
|
||||
--yellow-100: 254, 243, 199;
|
||||
--yellow-200: 253, 230, 138;
|
||||
--yellow-300: 252, 211, 77;
|
||||
--yellow-400: 251, 191, 36;
|
||||
--yellow-500: 245, 158, 11;
|
||||
--yellow-600: 217, 119, 6;
|
||||
--yellow-700: 180, 83, 9;
|
||||
--yellow-800: 146, 64, 14;
|
||||
--yellow-900: 120, 53, 15;
|
||||
|
||||
--green-50: 236, 253, 245;
|
||||
--green-100: 209, 250, 229;
|
||||
--green-200: 167, 243, 208;
|
||||
--green-300: 110, 231, 183;
|
||||
--green-400: 52, 211, 153;
|
||||
--green-500: 16, 185, 129;
|
||||
--green-600: 5, 150, 105;
|
||||
--green-700: 4, 120, 87;
|
||||
--green-800: 6, 95, 70;
|
||||
--green-900: 6, 78, 59;
|
||||
|
||||
--indigo-50: 238, 242, 255;
|
||||
--indigo-100: 224, 231, 255;
|
||||
--indigo-200: 199, 210, 254;
|
||||
--indigo-300: 165, 180, 252;
|
||||
--indigo-400: 129, 140, 248;
|
||||
--indigo-500: 99, 102, 241;
|
||||
--indigo-600: 79, 70, 229;
|
||||
--indigo-700: 67, 56, 202;
|
||||
--indigo-800: 55, 48, 163;
|
||||
--indigo-900: 49, 46, 129;
|
||||
|
||||
--accent-brand-lighter-rgb: var(--indigo-500);
|
||||
--accent-brand-rgb: var(--indigo-600);
|
||||
--accent-brand-darker-rgb: var(--indigo-700);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
padding: 10px 5px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
font-size: 1.4em;
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
div {
|
||||
margin-top: 5px;
|
||||
background: var(--card-bg);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
overflow: hidden;
|
||||
max-width: 620px;
|
||||
a {
|
||||
color: var(--link-brand-color) !important;
|
||||
color: var(--link-branded-color) !important;
|
||||
}
|
||||
.readme-overview {
|
||||
padding: 0.8em 0.5em;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
align-items: center;
|
||||
|
||||
> a {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
padding: 0 var(--su-3);
|
||||
|
||||
> a {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
|
||||
.ltag__wikipedia--logo {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background: var(--link-brand-color);
|
||||
background: var(--link-branded-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,6 @@
|
|||
.github-repo-row {
|
||||
background: var(--card-bg);
|
||||
padding: var(--su-3);
|
||||
|
||||
&:hover {
|
||||
background: var(--card-hover-bg);
|
||||
}
|
||||
|
||||
&.github-repo-row-featured {
|
||||
background: var(--card-selected-bg);
|
||||
}
|
||||
.github-repo-row-name {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -24,95 +24,71 @@
|
|||
--base-10: #242424;
|
||||
--base-0: #090909;
|
||||
|
||||
--base-a90: rgba(249, 249, 249, 0.9);
|
||||
--base-a80: rgba(249, 249, 249, 0.8);
|
||||
--base-a70: rgba(249, 249, 249, 0.7);
|
||||
--base-a60: rgba(249, 249, 249, 0.6);
|
||||
--base-a50: rgba(249, 249, 249, 0.5);
|
||||
--base-a40: rgba(249, 249, 249, 0.4);
|
||||
--base-a30: rgba(249, 249, 249, 0.3);
|
||||
--base-a20: rgba(249, 249, 249, 0.2);
|
||||
--base-a10: rgba(249, 249, 249, 0.1);
|
||||
--base-a5: rgba(249, 249, 249, 0.05);
|
||||
|
||||
--base-inverted-a90: rgba(0, 0, 0, 0.9);
|
||||
--base-inverted-a80: rgba(0, 0, 0, 0.8);
|
||||
--base-inverted-a70: rgba(0, 0, 0, 0.7);
|
||||
--base-inverted-a60: rgba(0, 0, 0, 0.6);
|
||||
--base-inverted-a50: rgba(0, 0, 0, 0.5);
|
||||
--base-inverted-a40: rgba(0, 0, 0, 0.4);
|
||||
--base-inverted-a30: rgba(0, 0, 0, 0.3);
|
||||
--base-inverted-a20: rgba(0, 0, 0, 0.2);
|
||||
--base-inverted-a10: rgba(0, 0, 0, 0.1);
|
||||
--base-inverted-a5: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* Accent colors */
|
||||
--accent-brand: #7b78ff;
|
||||
--accent-brand-darker: #5855f3;
|
||||
--accent-brand-lighter: #9896ff;
|
||||
--accent-brand-a10: rgba(123, 120, 255, 0.1);
|
||||
/* Brand */
|
||||
--accent-brand-lighter: rgb(var(--indigo-400));
|
||||
--accent-brand: rgb(var(--indigo-500));
|
||||
--accent-brand-darker: rgb(var(--indigo-600));
|
||||
|
||||
/* Success */
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: rgba(38, 217, 202, 0.1);
|
||||
;
|
||||
--accent-success: rgb(var(--green-600));
|
||||
--accent-success-darker: rgb(var(--green-700));
|
||||
--accent-success-lighter: rgb(var(--green-500));
|
||||
--accent-success-a10: rgba(var(--green-600), 0.2);
|
||||
|
||||
/* Warning */
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: rgba(255, 207, 76, 0.1);
|
||||
--accent-warning: rgb(var(--yellow-500));
|
||||
--accent-warning-darker: rgb(var(--yellow-600));
|
||||
--accent-warning-lighter: rgb(var(--yellow-400));
|
||||
--accent-warning-a10: rgba(var(--yellow-500), 0.2);
|
||||
|
||||
/* Danger */
|
||||
--accent-danger: #ed3434;
|
||||
--accent-danger-darker: #e40a0a;
|
||||
--accent-danger-lighter: #f15555;
|
||||
--accent-danger-a10: rgba(237, 52, 52, 0.1);
|
||||
--accent-danger: rgb(var(--red-600));
|
||||
--accent-danger-darker: rgb(var(--red-700));
|
||||
--accent-danger-lighter: rgb(var(--red-500));
|
||||
--accent-danger-a10: rgba(var(--red-600), 0.2);
|
||||
|
||||
/***********************************************
|
||||
** Functional color variables. *****************
|
||||
***********************************************/
|
||||
|
||||
/* Main colors */
|
||||
--body-bg: var(--base-0);
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
--body-bg: rgb(var(--black));
|
||||
--body-color: rgb(var(--grey-50));
|
||||
--body-color-inverted: rgb(var(--black));
|
||||
|
||||
/* Main content containers */
|
||||
--card-bg: var(--base-10);
|
||||
--card-color: var(--base-100);
|
||||
--card-color-secondary: var(--base-70);
|
||||
--card-color-tertiary: var(--base-50);
|
||||
--card-secondary-bg: var(--base-a5);
|
||||
--card-secondary-color: var(--base-90);
|
||||
--card-headline-color: var(--base-100);
|
||||
--card-border: rgba(255, 255, 255, 0.15);
|
||||
--card-secondary-border: rgba(255, 255, 255, 0.1);
|
||||
--card-hover-bg: var(--accent-brand-lighter);
|
||||
--card-selected-bg: var(--accent-brand-darker);
|
||||
--card-bg: rgb(var(--grey-900));
|
||||
--card-color: rgb(var(--grey-50));
|
||||
--card-color-secondary: rgb(var(--grey-300));
|
||||
--card-color-tertiary: rgb(var(--grey-400));
|
||||
--card-secondary-bg: rgb(var(--grey-900));
|
||||
--card-secondary-color: rgb(var(--grey-200));
|
||||
--card-border: rgba(var(--white), 0.15);
|
||||
--card-secondary-border: rgba(var(--white), 0.1);
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--base-10);
|
||||
--header-shadow: rgba(0, 0, 0, 0.3);
|
||||
--header-bg: rgb(var(--grey-900));
|
||||
--header-shadow: rgb(var(--black));
|
||||
|
||||
/* Footer */
|
||||
--footer-bg: var(--base-inverted);
|
||||
--footer-color: var(--base-60);
|
||||
--footer-bg: rgb(var(--grey-900));
|
||||
--footer-color: rgb(var(--grey-400));
|
||||
|
||||
/* Links */
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: #17a1f6;
|
||||
--link-bg-hover-alt: rgba(var(--base-inverted));
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
/* Primary buttons */
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color: var(--base-inverted);
|
||||
--button-primary-color-hover: var(--base-inverted);
|
||||
--button-primary-bg: var(--accent-brand-darker);
|
||||
--button-primary-bg-hover: var(--accent-brand);
|
||||
--button-primary-color: rgb(var(--white));
|
||||
--button-primary-color-hover: rgb(var(--white));
|
||||
/* -- Inverted */
|
||||
--button-primary-inverted-bg: var(--accent-brand);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-lighter);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
--button-primary-inverted-color-hover: var(--base-0);
|
||||
|
||||
|
|
@ -121,11 +97,6 @@
|
|||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
/* -- Inverted */
|
||||
--button-secondary-inverted-bg: var(--base-70);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
/* Outlined buttons */
|
||||
--button-outlined-bg: transparent;
|
||||
|
|
@ -134,13 +105,6 @@
|
|||
--button-outlined-border-hover: var(--base-30);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
/* -- Inverted */
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(0, 0, 0, 0.1);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
/* Ghost buttons */
|
||||
--button-ghost-bg: transparent;
|
||||
|
|
@ -156,61 +120,53 @@
|
|||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
/* Forms */
|
||||
--form-bg: var(--base-20);
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: var(--base-30);
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
--form-bg: rgb(var(--black));
|
||||
--form-bg-focus: rgb(var(--black));
|
||||
--form-border: rgb(var(--grey-700));
|
||||
--form-border-hover: rgb(var(--grey-600));
|
||||
--form-border-focus: var(--focus);
|
||||
--form-placeholder-color: rgb(var(--grey-600));
|
||||
|
||||
/* Form labels */
|
||||
--label-primary: var(--base-90);
|
||||
--label-secondary: var(--base-60);
|
||||
--label-primary: rgb(var(--grey-50));
|
||||
--label-secondary: rgb(var(--grey-30));
|
||||
|
||||
/* Snackbars */
|
||||
--snackbar-bg: var(--base-10);
|
||||
--snackbar-color: var(--card-color);
|
||||
|
||||
/* Indicators */
|
||||
--indicator-accent-bg: var(--accent-brand);
|
||||
--indicator-accent-color: var(--body-color);
|
||||
--indicator-critical-bg: var(--accent-danger);
|
||||
--indicator-critical-color: var(--body-color);
|
||||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
--snackbar-bg: rgb(var(--grey-50));
|
||||
--snackbar-color: rgb(var(--grey-900));
|
||||
|
||||
/* Tabs */
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color: rgb(var(--grey-100));
|
||||
--tab-color-hover: var(--accent-brand-lighter);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
--tab-color-current: rgb(var(--grey-50));
|
||||
--tab-bg-hover: rgba(var(--accent-brand-rgb), 0.2);
|
||||
--tab-bg-current: rgb(var(--accent-brand));
|
||||
|
||||
/* Tags */
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
--tag-color: rgb(var(--grey-300));
|
||||
--tag-color-hover: rgb(var(--grey-100));
|
||||
--tag-bg: rgba(var(--grey-50), 0.05);
|
||||
--tag-bg-hover: rgba(var(--grey-50), 0.05);
|
||||
--tag-prefix: rgba(var(--grey-50), 0.6);
|
||||
--tag-prefix-hover: rgb(var(--grey-50));
|
||||
|
||||
/* Story */
|
||||
--story-comments-bg: 21, 30, 42;
|
||||
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
||||
--story-comments-bg: rgb(var(--grey-800));
|
||||
--story-comments-bg-top: rgba(var(--grey-800), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--grey-800), 1);
|
||||
|
||||
/* Select icon */
|
||||
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
|
||||
|
||||
/* Reactions */
|
||||
--reaction-like-color: var(--accent-danger);
|
||||
--reaction-like-bg: var(--accent-danger-a10);
|
||||
--reaction-custom-color: var(--accent-success);
|
||||
--reaction-custom-bg: var(--accent-success-a10);
|
||||
--reaction-save-color: var(--accent-brand);
|
||||
--reaction-save-bg: var(--accent-brand-a10);
|
||||
--reaction-like-color: rgb(var(--red-500));
|
||||
--reaction-like-bg: rgba(var(--red-500), 0.1);
|
||||
--reaction-custom-color: rgb(var(--green-600));
|
||||
--reaction-custom-bg: rgb(var(--green-600), 0.1);
|
||||
--reaction-save-color: rgb(var(--indigo-500));
|
||||
--reaction-save-bg: rgba(var(--indigo-500), 0.1);
|
||||
--reaction-comment-color: rgb(var(--yellow-500));
|
||||
--reaction-comment-bg: rgba(var(--yellow-500), 0.1);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -225,51 +181,119 @@
|
|||
***********************************************/
|
||||
|
||||
/* Buttons: Default */
|
||||
--btn-color-hover: var(--accent-brand-lighter);
|
||||
--btn-bg: transparent;
|
||||
--btn-bg-hover: rgba(var(--indigo-900), 0.75);
|
||||
--btn-color: rgb(var(--grey-300));
|
||||
--btn-color-hover: rgb(var(--indigo-300));
|
||||
|
||||
--btn-current-bg: rgb(var(--grey-700));
|
||||
--btn-current-color: rgb(var(--grey-50));
|
||||
|
||||
/* Buttons: Primary */
|
||||
--btn-primary-bg-hover: var(--accent-brand-lighter);
|
||||
--btn-primary-bg: rgb(var(--indigo-700));
|
||||
--btn-primary-bg-hover: rgb(var(--indigo-600));
|
||||
--btn-primary-color: rgba(var(--white), 0.9);
|
||||
--btn-primary-color-hover: rgb(var(--white));
|
||||
|
||||
/* Buttons: Primary Destructive */
|
||||
--btn-primary-destructive-bg-hover: var(--accent-danger-lighter);
|
||||
/* Buttons: Secondary */
|
||||
--btn-secondary-bg: rgba(var(--indigo-600), 0.4);
|
||||
--btn-secondary-bg-hover: rgb(var(--indigo-700));
|
||||
--btn-secondary-color: rgb(var(--indigo-200));
|
||||
--btn-secondary-color-hover: rgb(var(--white));
|
||||
|
||||
/* Buttons: Destructive Default */
|
||||
--btn-destructive-bg: transparent;
|
||||
--btn-destructive-bg-hover: rgba(var(--red-500), 0.3);
|
||||
--btn-destructive-color: rgb(var(--red-400));
|
||||
--btn-destructive-color-hover: rgb(var(--red-300));
|
||||
|
||||
/* Buttons: Destructive Primary */
|
||||
--btn-primary-destructive-bg: rgb(var(--red-700));
|
||||
--btn-primary-destructive-bg-hover: rgb(var(--red-600));
|
||||
--btn-primary-destructive-color: rgb(var(--white));
|
||||
--btn-primary-destructive-color-hover: rgb(var(--white));
|
||||
|
||||
/***********************************************
|
||||
** Links ***************************************
|
||||
***********************************************/
|
||||
|
||||
/* Links: Default */
|
||||
--link-color-hover: var(--accent-brand-lighter);
|
||||
--link-bg: transparent;
|
||||
--link-bg-hover: rgba(var(--indigo-900), 0.75);
|
||||
--link-color: rgb(var(--grey-300));
|
||||
--link-color-hover: rgb(var(--indigo-300));
|
||||
|
||||
--link-current-bg: rgb(var(--grey-700));
|
||||
--link-current-color: rgb(var(--grey-50));
|
||||
|
||||
/* Links: Branded */
|
||||
--link-branded-color-hover: var(--accent-brand-lighter);
|
||||
--link-branded-bg: transparent;
|
||||
--link-branded-bg-hover: rgba(var(--indigo-900), 0.75);
|
||||
--link-branded-color: rgb(var(--indigo-400));
|
||||
--link-branded-color-hover: rgb(var(--indigo-300));
|
||||
|
||||
/***********************************************
|
||||
** CTAs ****************************************
|
||||
***********************************************/
|
||||
|
||||
/* CTAs: Default */
|
||||
--cta-color-hover: var(--accent-brand-lighter);
|
||||
--cta-border-hover: var(--accent-brand-lighter);
|
||||
--cta-bg: transparent;
|
||||
--cta-bg-hover: rgba(var(--indigo-900), 0.75);
|
||||
--cta-color: rgb(var(--grey-300));
|
||||
--cta-color-hover: rgb(var(--indigo-300));
|
||||
--cta-border: rgb(var(--grey-500));
|
||||
--cta-border-hover: rgb(var(--indigo-400));
|
||||
|
||||
/* CTAs: Branded */
|
||||
--cta-branded-bg-hover: var(--accent-brand);
|
||||
--cta-branded-border: var(--accent-brand);
|
||||
--cta-branded-border-hover: var(--accent-brand-lighter);
|
||||
--cta-branded-bg: transparent;
|
||||
--cta-branded-bg-hover: rgb(var(--indigo-600));
|
||||
--cta-branded-color: rgb(var(--indigo-400));
|
||||
--cta-branded-color-hover: rgb(var(--white));
|
||||
--cta-branded-border: rgb(var(--indigo-400));
|
||||
--cta-branded-border-hover: rgb(var(--indigo-500));
|
||||
|
||||
|
||||
/***********************************************
|
||||
** Badges **************************************
|
||||
** Tooltips ************************************
|
||||
***********************************************/
|
||||
|
||||
/* Badges: Danger */
|
||||
--badge-danger-bg: var(--accent-danger-darker);
|
||||
--badge-danger-color: rgb(255,255,255);
|
||||
--tooltip-bg: rgba(var(--white), 0.9);
|
||||
--tooltip-color: rgb(var(--grey-800));
|
||||
|
||||
/* Badges: Info */
|
||||
--badge-info-bg: var(--accent-brand-darker);
|
||||
--badge-info-color: rgb(255,255,255);
|
||||
/***********************************************
|
||||
** Indicators **********************************
|
||||
***********************************************/
|
||||
|
||||
/* Indicators: Default */
|
||||
--indicator-bg: rgb(var(--grey-600));
|
||||
--indicator-color: rgb(var(--grey-200));
|
||||
|
||||
/* Indicators: Success */
|
||||
--indicator-success-bg: rgb(var(--green-700));
|
||||
--indicator-success-color: rgb(var(--green-50));
|
||||
|
||||
/* Indicators: Warning */
|
||||
--indicator-warning-bg: rgb(var(--yellow-400));
|
||||
--indicator-warning-color: rgb(var(--yellow-900));
|
||||
|
||||
/* Indicators: Danger */
|
||||
--indicator-danger-bg: rgb(var(--red-700));
|
||||
--indicator-danger-color: rgb(var(--red-50));
|
||||
|
||||
/* Indicators: Info */
|
||||
--indicator-info-bg: rgb(var(--indigo-700));
|
||||
--indicator-info-color: rgb(var(--indigo-100));
|
||||
|
||||
/***********************************************
|
||||
** Utilities ***********************************
|
||||
***********************************************/
|
||||
|
||||
/* Focus */
|
||||
--focus: var(--accent-brand-lighter);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-1: 0 10px 15px -3px rgba(var(--black), 0.5),
|
||||
0 4px 6px -2px rgba(var(--black), 0.25), inset 0 0 0 1px rgba(var(--white), 0.1);
|
||||
--shadow-2: 0 20px 25px -5px rgba(var(--black), 0.5),
|
||||
0 10px 10px -5px rgba(var(--black), 0.25), inset 0 0 0 1px rgba(var(--white), 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -343,8 +343,8 @@
|
|||
|
||||
.drop-area {
|
||||
&--active {
|
||||
background: var(--accent-brand-a10);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-brand);
|
||||
background: rgba(var(--accent-brand-rgb), 0.1);
|
||||
box-shadow: inset 0 0 0 1px var(--focus);
|
||||
|
||||
// ideally this one shouldn't be there, but I'm not sure how else we could handle that right now...
|
||||
.crayons-article-form__toolbar {
|
||||
|
|
|
|||
|
|
@ -222,10 +222,10 @@
|
|||
}
|
||||
|
||||
.reaction-button.reacted {
|
||||
background: var(--accent-brand);
|
||||
background: var(--btn-primary-bg);
|
||||
|
||||
.reaction-button-circle {
|
||||
border-color: var(--accent-brand-lighter);
|
||||
border-color: var(--btn-primary-bg);
|
||||
}
|
||||
|
||||
.vote-text {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
background: var(--base-0);
|
||||
|
||||
.article-title {
|
||||
color: var(--link-brand-color);
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
grid-gap: var(--su-6);
|
||||
padding: var(--su-6);
|
||||
margin: var(--su-3);
|
||||
background: var(--accent-brand-a10);
|
||||
background: rgba(var(--brand), 0.1);
|
||||
color: var(--card-color);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--accent-brand-a10);
|
||||
border: 1px solid rgba(var(--brand), 0.1);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
padding: var(--su-7);
|
||||
|
|
|
|||
|
|
@ -29,11 +29,5 @@ with, for example, `p-*` utility classes.
|
|||
|
||||
## Design
|
||||
|
||||
<mark>
|
||||
Comparing designs with what's in the Storybook you may notice differences in colors.
|
||||
This is due to the fact that Figma already reflects new colors palette which is not yet reflected in the codebase
|
||||
(it's currently being reviewed in a separate PR).
|
||||
</mark>
|
||||
<br /><br />
|
||||
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FgHpwugeu9jFGW4d9u3ReuR%2FCrayons%3Fnode-id%3D391%253A234" allowfullscreen></iframe>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export default {
|
|||
export const Default = (args) => <Indicator {...args} />;
|
||||
Default.args = {
|
||||
children: 'Hello world',
|
||||
extraPadding: false,
|
||||
};
|
||||
|
||||
export const VariantInfo = (args) => <Indicator {...args} />;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
module Color
|
||||
class CompareHex
|
||||
ACCENT_MODIFIERS = [1.14, 1.08, 1.06, 0.96, 0.9, 0.8, 0.7, 0.6].freeze
|
||||
RGB_FORMAT = "%<r>d, %<g>d, %<b>d".freeze
|
||||
BRIGHTNESS_FORMAT = "#%<r>02x%<g>02x%<b>02x".freeze
|
||||
OPACITY_FORMAT = "rgba(%<r>d, %<g>d, %<b>d, %<a>.2f)".freeze
|
||||
RGB_REGEX = /^#?(?<r>..)(?<g>..)(?<b>..)$/
|
||||
|
|
@ -17,11 +18,11 @@ module Color
|
|||
hexes.last
|
||||
end
|
||||
|
||||
def brightness(amount = 1)
|
||||
def brightness(amount = 1, only_values: false)
|
||||
rgb = hex_to_rgb_hash(smallest).transform_values do |color|
|
||||
(color * amount).round
|
||||
end
|
||||
format(BRIGHTNESS_FORMAT, rgb)
|
||||
only_values ? format(RGB_FORMAT, rgb) : format(BRIGHTNESS_FORMAT, rgb)
|
||||
rescue StandardError
|
||||
smallest
|
||||
end
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-10 pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px" }, id: "follows_update_form" do |f| %>
|
||||
<%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-inverted pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px" }, id: "follows_update_form" do |f| %>
|
||||
<button type="submit" class="crayons-btn crayons-btn--m mb-3" name="commit"><%= t("views.dashboard.following_tags.update") %></button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
|
|
|
|||
|
|
@ -61,10 +61,9 @@
|
|||
<div id="body-styles">
|
||||
<style>
|
||||
:root {
|
||||
--accent-brand: <%= Settings::UserExperience.primary_brand_color_hex %>;
|
||||
--accent-brand-darker: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(0.85) %>;
|
||||
--accent-brand-lighter: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(1.1) %>;
|
||||
--accent-brand-a10: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).opacity(0.1) %>;
|
||||
--accent-brand-lighter-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(1.35, only_values: true) %>;
|
||||
--accent-brand-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(1, only_values: true) %>;
|
||||
--accent-brand-darker-rgb: <%= Color::CompareHex.new([Settings::UserExperience.primary_brand_color_hex]).brightness(0.8, only_values: true) %>;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue