alpha (#7681)
This commit is contained in:
ludwiczakpawel
GitHub
parent
015686d344
commit
01963eacc3
7 changed files with 102 additions and 19 deletions
|
|
@ -60,7 +60,7 @@
|
|||
padding: $su-3;
|
||||
border-radius: $br-default;
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.crayons-link--current) {
|
||||
background: var(--link-bg-hover);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
&--danger {
|
||||
@include generate-box(
|
||||
$level: 1,
|
||||
$bg: var(--card-bg),
|
||||
$bg: var(--accent-danger-a10),
|
||||
$border: var(--accent-danger),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
&--warning {
|
||||
@include generate-box(
|
||||
$level: 1,
|
||||
$bg: var(--card-bg),
|
||||
$bg: var(--accent-warning-a10),
|
||||
$border: var(--accent-warning),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
&--success {
|
||||
@include generate-box(
|
||||
$level: 1,
|
||||
$bg: var(--card-bg),
|
||||
$bg: var(--accent-success-a10),
|
||||
$border: var(--accent-success),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
&--info {
|
||||
@include generate-box(
|
||||
$level: 1,
|
||||
$bg: var(--card-bg),
|
||||
$bg: var(--accent-brand-a10),
|
||||
$border: var(--accent-brand),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,20 @@
|
|||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Base
|
||||
--base-100: #08090a;
|
||||
--base: #08090a;
|
||||
|
||||
--base-a90: #{rgba(#08090a, 0.9)};
|
||||
--base-a80: #{rgba(#08090a, 0.8)};
|
||||
--base-a70: #{rgba(#08090a, 0.7)};
|
||||
--base-a60: #{rgba(#08090a, 0.6)};
|
||||
--base-a50: #{rgba(#08090a, 0.5)};
|
||||
--base-a40: #{rgba(#08090a, 0.4)};
|
||||
--base-a30: #{rgba(#08090a, 0.3)};
|
||||
--base-a20: #{rgba(#08090a, 0.2)};
|
||||
--base-a10: #{rgba(#08090a, 0.1)};
|
||||
--base-a5: #{rgba(#08090a, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #202428;
|
||||
--base-80: #363d44;
|
||||
--base-70: #4d5760;
|
||||
|
|
@ -30,21 +43,25 @@
|
|||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: #{rgba(#3b49df, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: #{rgba(#26d9ca, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Functional color variables. /////////////////////////////////////////////////////
|
||||
|
|
@ -52,9 +69,7 @@
|
|||
|
||||
// Main colors
|
||||
--body-bg: #f9fafa; // todo: replace with `var(--base-10);` when ready.
|
||||
--body-color: var(
|
||||
--base-100
|
||||
); // todo: replace with `var(--base-100);` when ready.
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
|
|
@ -88,7 +103,7 @@
|
|||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--accent-brand-darker);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-color-current: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,20 @@
|
|||
--theme-color: #ffffff;
|
||||
|
||||
// Base
|
||||
--base-100: #ffffff;
|
||||
--base: #ffffff;
|
||||
|
||||
--base-a90: #{rgba(#ffffff, 0.9)};
|
||||
--base-a80: #{rgba(#ffffff, 0.8)};
|
||||
--base-a70: #{rgba(#ffffff, 0.7)};
|
||||
--base-a60: #{rgba(#ffffff, 0.6)};
|
||||
--base-a50: #{rgba(#ffffff, 0.5)};
|
||||
--base-a40: #{rgba(#ffffff, 0.4)};
|
||||
--base-a30: #{rgba(#ffffff, 0.3)};
|
||||
--base-a20: #{rgba(#ffffff, 0.2)};
|
||||
--base-a10: #{rgba(#ffffff, 0.1)};
|
||||
--base-a5: #{rgba(#ffffff, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #e3e3e3;
|
||||
--base-80: #c8c8c8;
|
||||
--base-70: #adadad;
|
||||
|
|
@ -26,21 +39,25 @@
|
|||
--accent-brand: #2eff7b;
|
||||
--accent-brand-darker: #00c548;
|
||||
--accent-brand-lighter: #8effb7;
|
||||
--accent-brand-a10: #{rgba(#2eff7b, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: var(--accent-brand);
|
||||
--accent-success-darker: var(--accent-brand-darker);
|
||||
--accent-success-lighter: var(--accent-brand-lighter);
|
||||
--accent-success-a10: #{rgba(#2eff7b, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-0);
|
||||
|
|
@ -82,7 +99,7 @@
|
|||
--link-color-secondary: var(--accent-brand-darker);
|
||||
--link-color-secondary-hover: var(--accent-brand-darker);
|
||||
--link-brand-color: #e24ec1;
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover: var(--base-a10);
|
||||
--link-bg-hover-alt: var(--base-0);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,20 @@
|
|||
--theme-container-border: 1px solid #e3e3e5;
|
||||
|
||||
// Base
|
||||
--base-100: #0a0a0a;
|
||||
--base: #0a0a0a;
|
||||
|
||||
--base-a90: #{rgba(#0a0a0a, 0.9)};
|
||||
--base-a80: #{rgba(#0a0a0a, 0.8)};
|
||||
--base-a70: #{rgba(#0a0a0a, 0.7)};
|
||||
--base-a60: #{rgba(#0a0a0a, 0.6)};
|
||||
--base-a50: #{rgba(#0a0a0a, 0.5)};
|
||||
--base-a40: #{rgba(#0a0a0a, 0.4)};
|
||||
--base-a30: #{rgba(#0a0a0a, 0.3)};
|
||||
--base-a20: #{rgba(#0a0a0a, 0.2)};
|
||||
--base-a10: #{rgba(#0a0a0a, 0.1)};
|
||||
--base-a5: #{rgba(#0a0a0a, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #202020;
|
||||
--base-80: #353535;
|
||||
--base-70: #4b4b4b;
|
||||
|
|
@ -24,21 +37,25 @@
|
|||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: #{rgba(#3b49df, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: #{rgba(#26d9ca, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: #fcfcfc;
|
||||
|
|
@ -80,7 +97,7 @@
|
|||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-10);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,20 @@
|
|||
--theme-color: #ffffff;
|
||||
|
||||
// Base
|
||||
--base-100: #f9fafa;
|
||||
--base: #f9fafa;
|
||||
|
||||
--base-a90: #{rgba(#f9fafa, 0.9)};
|
||||
--base-a80: #{rgba(#f9fafa, 0.8)};
|
||||
--base-a70: #{rgba(#f9fafa, 0.7)};
|
||||
--base-a60: #{rgba(#f9fafa, 0.6)};
|
||||
--base-a50: #{rgba(#f9fafa, 0.5)};
|
||||
--base-a40: #{rgba(#f9fafa, 0.4)};
|
||||
--base-a30: #{rgba(#f9fafa, 0.3)};
|
||||
--base-a20: #{rgba(#f9fafa, 0.2)};
|
||||
--base-a10: #{rgba(#f9fafa, 0.1)};
|
||||
--base-a5: #{rgba(#f9fafa, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #dde0e2;
|
||||
--base-80: #c2c6ca;
|
||||
--base-70: #a7adb2;
|
||||
|
|
@ -26,21 +39,25 @@
|
|||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: #{rgba(#3b49df, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: #{rgba(#26d9ca, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-0);
|
||||
|
|
@ -78,7 +95,7 @@
|
|||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--accent-brand-lighter);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: #17a1f6;
|
||||
--link-color-current: var(--base-100);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,20 @@
|
|||
--theme-container-border: 1px solid #ff4983;
|
||||
|
||||
// Base
|
||||
--base-100: #000000;
|
||||
--base: #1c060d;
|
||||
|
||||
--base-a90: #{rgba(#1c060d, 0.9)};
|
||||
--base-a80: #{rgba(#1c060d, 0.8)};
|
||||
--base-a70: #{rgba(#1c060d, 0.7)};
|
||||
--base-a60: #{rgba(#1c060d, 0.6)};
|
||||
--base-a50: #{rgba(#1c060d, 0.5)};
|
||||
--base-a40: #{rgba(#1c060d, 0.4)};
|
||||
--base-a30: #{rgba(#1c060d, 0.3)};
|
||||
--base-a20: #{rgba(#1c060d, 0.2)};
|
||||
--base-a10: #{rgba(#1c060d, 0.1)};
|
||||
--base-a5: #{rgba(#1c060d, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #330f1a;
|
||||
--base-80: #57192d;
|
||||
--base-70: #7d2440;
|
||||
|
|
@ -24,25 +37,29 @@
|
|||
--accent-brand: #ff6c9b;
|
||||
--accent-brand-darker: #f03e76;
|
||||
--accent-brand-lighter: #ff99b9;
|
||||
--accent-brand-a10: #{rgba(#ff6c9b, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #71db92;
|
||||
--accent-success-darker: #5abf79;
|
||||
--accent-success-lighter: #93edaf;
|
||||
--accent-success-a10: #{rgba(#71db92, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-0);
|
||||
--body-color: #0a0a0a;
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
|
|
@ -80,7 +97,7 @@
|
|||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-brand-color: #4e57ef;
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue