diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss index fa8885e20..693ea93c7 100644 --- a/app/assets/stylesheets/base/main.scss +++ b/app/assets/stylesheets/base/main.scss @@ -57,7 +57,7 @@ body { } a { - color: var(--link-brand-color); + color: var(--link-branded-color); text-decoration: none; } diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss index 40fb93b6f..9f644f369 100644 --- a/app/assets/stylesheets/base/typography.scss +++ b/app/assets/stylesheets/base/typography.scss @@ -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); } } diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index f21b1f221..15f322a84 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -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); } } diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss index fdbf9c232..74d47fadd 100644 --- a/app/assets/stylesheets/components/cards.scss +++ b/app/assets/stylesheets/components/cards.scss @@ -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 { diff --git a/app/assets/stylesheets/components/drawer-navigation.scss b/app/assets/stylesheets/components/drawer-navigation.scss index 879492318..275919c47 100644 --- a/app/assets/stylesheets/components/drawer-navigation.scss +++ b/app/assets/stylesheets/components/drawer-navigation.scss @@ -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 { diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss index 59a5d5671..a40f31069 100644 --- a/app/assets/stylesheets/components/dropdowns.scss +++ b/app/assets/stylesheets/components/dropdowns.scss @@ -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) { diff --git a/app/assets/stylesheets/components/hamburger.scss b/app/assets/stylesheets/components/hamburger.scss index 6a9625c29..4960504d4 100644 --- a/app/assets/stylesheets/components/hamburger.scss +++ b/app/assets/stylesheets/components/hamburger.scss @@ -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); } } diff --git a/app/assets/stylesheets/components/indicators.scss b/app/assets/stylesheets/components/indicators.scss index 433bc6fb9..03acce2b8 100644 --- a/app/assets/stylesheets/components/indicators.scss +++ b/app/assets/stylesheets/components/indicators.scss @@ -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 { diff --git a/app/assets/stylesheets/components/media-cards.scss b/app/assets/stylesheets/components/media-cards.scss index 105243724..df637625f 100644 --- a/app/assets/stylesheets/components/media-cards.scss +++ b/app/assets/stylesheets/components/media-cards.scss @@ -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 { diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss index a0dc4912a..53c635ea9 100644 --- a/app/assets/stylesheets/components/modals.scss +++ b/app/assets/stylesheets/components/modals.scss @@ -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); diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 5d26226e5..dad4dff52 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -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; diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss index c472fe828..677475ea2 100644 --- a/app/assets/stylesheets/components/notices.scss +++ b/app/assets/stylesheets/components/notices.scss @@ -19,6 +19,6 @@ } &--info { - background: var(--accent-brand-a10); + background: rgba(var(--brand), 0.1); } } diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss index 51215a4ee..17648fa5f 100644 --- a/app/assets/stylesheets/components/stories.scss +++ b/app/assets/stylesheets/components/stories.scss @@ -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); diff --git a/app/assets/stylesheets/components/tabs.scss b/app/assets/stylesheets/components/tabs.scss index f22cb6698..8fa9da444 100644 --- a/app/assets/stylesheets/components/tabs.scss +++ b/app/assets/stylesheets/components/tabs.scss @@ -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); } } } diff --git a/app/assets/stylesheets/components/tags.scss b/app/assets/stylesheets/components/tags.scss index 26e64994e..215820cfe 100644 --- a/app/assets/stylesheets/components/tags.scss +++ b/app/assets/stylesheets/components/tags.scss @@ -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); diff --git a/app/assets/stylesheets/components/tooltips.scss b/app/assets/stylesheets/components/tooltips.scss index 3f6f225b4..78669c15c 100644 --- a/app/assets/stylesheets/components/tooltips.scss +++ b/app/assets/stylesheets/components/tooltips.scss @@ -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); diff --git a/app/assets/stylesheets/config/_colors.css b/app/assets/stylesheets/config/_colors.css index a8c2c0ae5..a7bc1d21b 100644 --- a/app/assets/stylesheets/config/_colors.css +++ b/app/assets/stylesheets/config/_colors.css @@ -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); } diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss index 9016a2844..b757a379f 100644 --- a/app/assets/stylesheets/config/_variables.scss +++ b/app/assets/stylesheets/config/_variables.scss @@ -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); } diff --git a/app/assets/stylesheets/credits.scss b/app/assets/stylesheets/credits.scss index 4126cfeeb..3054c45ef 100644 --- a/app/assets/stylesheets/credits.scss +++ b/app/assets/stylesheets/credits.scss @@ -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); diff --git a/app/assets/stylesheets/ltags/GithubReadmeTag.scss b/app/assets/stylesheets/ltags/GithubReadmeTag.scss index e1ec05f06..4c5446aed 100644 --- a/app/assets/stylesheets/ltags/GithubReadmeTag.scss +++ b/app/assets/stylesheets/ltags/GithubReadmeTag.scss @@ -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; diff --git a/app/assets/stylesheets/ltags/RedditTag.scss b/app/assets/stylesheets/ltags/RedditTag.scss index d5303dec0..adaaeb312 100644 --- a/app/assets/stylesheets/ltags/RedditTag.scss +++ b/app/assets/stylesheets/ltags/RedditTag.scss @@ -30,7 +30,7 @@ align-items: center; > a { - color: var(--link-brand-color); + color: var(--link-branded-color); display: inline-block; } diff --git a/app/assets/stylesheets/ltags/WikipediaTag.scss b/app/assets/stylesheets/ltags/WikipediaTag.scss index 21a39a294..f9286b977 100644 --- a/app/assets/stylesheets/ltags/WikipediaTag.scss +++ b/app/assets/stylesheets/ltags/WikipediaTag.scss @@ -20,7 +20,7 @@ padding: 0 var(--su-3); > a { - color: var(--link-brand-color); + color: var(--link-branded-color); } .ltag__wikipedia--logo { diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss index 02a67f621..87110c08e 100644 --- a/app/assets/stylesheets/preact/onboarding-modal.scss +++ b/app/assets/stylesheets/preact/onboarding-modal.scss @@ -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); } } } diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index 9b99ef451..514698370 100755 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -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; diff --git a/app/assets/stylesheets/themes/dark.css b/app/assets/stylesheets/themes/dark.css index fae8cc926..dc521c6a8 100644 --- a/app/assets/stylesheets/themes/dark.css +++ b/app/assets/stylesheets/themes/dark.css @@ -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); } diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss index a302f7242..f291e615e 100644 --- a/app/assets/stylesheets/views/article-form.scss +++ b/app/assets/stylesheets/views/article-form.scss @@ -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 { diff --git a/app/assets/stylesheets/views/mod-actions.scss b/app/assets/stylesheets/views/mod-actions.scss index 49d8002a6..fa7ae09ca 100644 --- a/app/assets/stylesheets/views/mod-actions.scss +++ b/app/assets/stylesheets/views/mod-actions.scss @@ -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 { diff --git a/app/assets/stylesheets/views/mod-center.scss b/app/assets/stylesheets/views/mod-center.scss index 255a86122..1ce216e07 100644 --- a/app/assets/stylesheets/views/mod-center.scss +++ b/app/assets/stylesheets/views/mod-center.scss @@ -76,7 +76,7 @@ background: var(--base-0); .article-title { - color: var(--link-brand-color); + color: var(--link-branded-color); } } diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss index 0d32cf4bf..24742e1be 100644 --- a/app/assets/stylesheets/views/signin.scss +++ b/app/assets/stylesheets/views/signin.scss @@ -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); diff --git a/app/javascript/crayons/Indicators/__stories__/Indicators.mdx b/app/javascript/crayons/Indicators/__stories__/Indicators.mdx index d30e4993f..d1ae618ff 100644 --- a/app/javascript/crayons/Indicators/__stories__/Indicators.mdx +++ b/app/javascript/crayons/Indicators/__stories__/Indicators.mdx @@ -29,11 +29,5 @@ with, for example, `p-*` utility classes. ## Design - - 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). - -

diff --git a/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx b/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx index 64bf33724..5e075487d 100644 --- a/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx +++ b/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx @@ -41,6 +41,7 @@ export default { export const Default = (args) => ; Default.args = { children: 'Hello world', + extraPadding: false, }; export const VariantInfo = (args) => ; diff --git a/app/services/color/compare_hex.rb b/app/services/color/compare_hex.rb index afdef4598..6d153a602 100644 --- a/app/services/color/compare_hex.rb +++ b/app/services/color/compare_hex.rb @@ -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 = "%d, %d, %d".freeze BRIGHTNESS_FORMAT = "#%02x%02x%02x".freeze OPACITY_FORMAT = "rgba(%d, %d, %d, %.2f)".freeze RGB_REGEX = /^#?(?..)(?..)(?..)$/ @@ -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 diff --git a/app/views/dashboards/following_tags.html.erb b/app/views/dashboards/following_tags.html.erb index 008ee1f3c..c3c5c41da 100644 --- a/app/views/dashboards/following_tags.html.erb +++ b/app/views/dashboards/following_tags.html.erb @@ -46,7 +46,7 @@ <% end %> - <%= 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| %> <% end %> <% else %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c079bc5dc..d287abc24 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -61,10 +61,9 @@