diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs index 66783f517..1f923b610 100644 --- a/.git-blame-ignore-revs +++ b/.git-blame-ignore-revs @@ -1,2 +1,6 @@ +# To leverage this file and skip commits marked for ignore by git blame, +# use command `git config blame.ignoreRevsFile .git-blame-ignore-revs` +# to configure git to skip the below commits. + # Moving to two space indent 2b2c5710fe8160604ef78fa3bc1a1f3752e5e255 diff --git a/src/CONTRIBUTING.md b/src/CONTRIBUTING.md index 45f39dd58..ad6921ced 100644 --- a/src/CONTRIBUTING.md +++ b/src/CONTRIBUTING.md @@ -47,6 +47,7 @@ One-time setup activities to start contributing: - Choose a local folder for the cloned files - Clone the repository to your local machine - Configure the upstream remote value +- Configure git to ignore specified commits via `git config blame.ignoreRevsFile .git-blame-ignore-revs` ### Overview diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss index 6f6770bf9..fa200d854 100644 --- a/src/components/Card/card.module.scss +++ b/src/components/Card/card.module.scss @@ -68,7 +68,7 @@ margin-right: $space-l; padding: $disabled-zero; padding-bottom: $space-s; - background-color: $background-color-white; + background-color: var(--card-background-color); } &-buttons { @@ -104,7 +104,7 @@ .button-icon { position: absolute; right: $disabled-zero; - background-color: $background-color-white; + background-color: var(--card-background-color); } } diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index 2f08a6bf0..34a70b4b6 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -296,7 +296,7 @@ transition: all 0.3s; &:hover { - color: $text-color-secondary; + color: var(--text-secondary-color); background: $table-header-filter-active-background-color; } diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss index 39ac09811..bafeee998 100644 --- a/src/components/Tabs/tabs.module.scss +++ b/src/components/Tabs/tabs.module.scss @@ -14,6 +14,7 @@ align-items: center; border: none; color: var(--tab-label); + background: var(--tab-background); cursor: pointer; display: flex; font-family: $octuple-font-family; @@ -126,12 +127,12 @@ --tab-hover-label: var(--tab-pill-hover-label); background-color: var(--tab-pill-background); width: fit-content; - border-radius: $border-radius-xl; - padding: calc(#{$space-xs} - #{$space-xxxs}); + border-radius: var(--tab-pill-border-radius); + padding: var(--tab-pill-medium-padding); .tab { padding: $button-padding-vertical-medium $button-padding-horizontal-medium; - border-radius: $border-radius-xl; + border-radius: var(--tab-pill-border-radius); &.active { .badge { @@ -147,7 +148,7 @@ &.large { &.pill { - padding: $space-xs; + padding: var(--tab-pill-large-padding); .tab { padding: $button-padding-vertical-large $button-padding-horizontal-large; @@ -169,7 +170,7 @@ &.medium { &.pill { - padding: calc(#{$space-xs} - #{$space-xxxs}); + padding: var(--tab-pill-medium-padding); .tab { padding: $button-padding-vertical-medium @@ -192,7 +193,7 @@ &.small { &.pill { - padding: $space-xxs; + padding: var(--tab-pill-small-padding); .tab { padding: $button-padding-vertical-small $button-padding-horizontal-small; @@ -228,21 +229,46 @@ border-color: var(--border); } + &:not(.bordered) { + padding: 0; + + &.divider { + padding: 0; + + .tab:not(.tab-rtl) { + &:first-of-type { + margin-left: 0; + } + &:last-of-type { + margin-right: 0; + } + } + .tab-rtl { + &:first-of-type { + margin-right: 0; + } + &:last-of-type { + margin-left: 0; + } + } + } + } + .tab { - --active-border: var(--grey-color-60); - --bg: var(--background-color); - --border: var(--background-color); - --border-radius: 40px; + --active-border: var(stat-tab-active-border-color); + --bg: var(--stat-tab-background-color); + --border: var(--stat-tab-border-color); + --border-radius: var(--stat-tab-border-radius); --divider-height: 84px; --divider-width: 1px; --height: 116px; - --hover-bg: var(--grey-color-20); - --hover-border: var(--grey-color-20); - --icon: var(--grey-color-70); - --icon-bg: var(--grey-color-20); + --hover-bg: var(--stat-tab-hover-background-color); + --hover-border: var(--stat-tab-hover-border-color); + --icon: var(--stat-tab-icon-color); + --icon-bg: var(--stat-tab-icon-background-color); --icon-height: 72px; --icon-width: 72px; - --label: var(--text-secondary-color); + --label: var(--stat-tab-label-color); --width: 200px; background: var(--bg); border: var(--border-width) solid var(--border); @@ -437,15 +463,17 @@ .tab { margin: 0 $space-ml; - &:not(:last-of-type) { - &:after { - background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23d9dce1' stroke-width='1' stroke-dasharray='2' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); - content: ' '; - height: var(--divider-height); - position: absolute; - right: calc(calc($space-ml + 1px) * -1); - width: var(--divider-width); - } + &:not(:last-of-type):after { + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23d9dce1' stroke-width='1' stroke-dasharray='2' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); + content: ' '; + height: var(--divider-height); + position: absolute; + right: calc(calc($space-ml + 1px) * -1); + width: var(--divider-width); + } + &-rtl:not(:last-of-type):after { + right: auto; + left: calc(calc($space-ml + 1px) * -1); } } } diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 3787ac865..65c1f5ac4 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -130,7 +130,7 @@ } @mixin octuple-hr { - background-color: $divider-line-color; + background-color: var(--horizontal-rule-color); width: 100%; } diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss index 3331021db..b0958ef35 100644 --- a/src/styles/themes/_default-theme.scss +++ b/src/styles/themes/_default-theme.scss @@ -184,6 +184,7 @@ --backdrop-filter: blur(5px); --anchor-color: var(--primary-color-70); + --horizontal-rule-color: var(--grey-color-40); --border-radius-xs: 2px; --border-radius-s: 4px; @@ -193,6 +194,7 @@ // ------ Tabs theme ------ --tab-label: var(--text-secondary-color); + --tab-background: transparent; --tab-active-label: var(--primary-color-70); --tab-active-background: transparent; --tab-hover-label: var(--primary-color); @@ -200,6 +202,10 @@ --tab-indicator-color: var(--primary-color-70); --tab-small-active-background: transparent; --tab-small-hover-background: transparent; + --tab-pill-border-radius: var(--border-radius-xl); + --tab-pill-large-padding: 8px; + --tab-pill-medium-padding: 6px; + --tab-pill-small-padding: 4px; --tab-pill-label: var(--text-secondary-color); --tab-pill-active-label: var(--primary-color-80); --tab-pill-active-background: var(--primary-color-20); @@ -208,6 +214,25 @@ --tab-underline: var(--border-color); // ------ Tabs theme ------ + // ------ Stat tab theme ------ + --stat-tabs-border-radius: var(--border-radius-xl); + --stat-tabs-border-width: 1px; + --stat-tabs-border-style: solid; + --stat-tabs-border-color: var(--border-color); + + // Individual tabs + --stat-tab-border-radius: 40px; + --stat-tab-label-color: var(--text-secondary-color); + --stat-tab-background-color: var(--background-color); + --stat-tab-border-color: var(--stat-tab-background-color); + --stat-tab-icon-color: var(--grey-color-70); + --stat-tab-icon-background-color: var(--grey-color-20); + --stat-tab-active-border-color: var(--grey-color-60); + --stat-tab-hover-background-color: var(--grey-color-20); + --stat-tab-hover-border-color: var(--grey-color-20); + + // ------ Stat tab theme ------ + // ------ Navbar theme ------ --navbar-background: var(--primary-color-80); --navbar-text-color: var(--text-inverse-color); diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss index 5e9e9a366..894a8bb63 100644 --- a/src/styles/themes/_definitions.scss +++ b/src/styles/themes/_definitions.scss @@ -54,16 +54,8 @@ $color-tertiary-blue: var(--blue-color-60); $color-tertiary-violet: var(--violet-color-60); $color-tertiary-grey: var(--grey-color-60); -$text-color-primary: var(--grey-color-90); -$text-color-secondary: var(--grey-color-80); - -$card-background-color: var(--background-color); -$background-color-white: var(--background-color); - $input-field-color-enabled: var(--grey-color-40); -$divider-line-color: var(--grey-color-40); - // Gradient Definitions $eightfold-logo-gradient: linear-gradient( @@ -92,7 +84,7 @@ $expandable-header-gradient: linear-gradient( 270deg, hsla(0, 0%, 100%, 0) 22.25%, hsla(0, 0%, 100%, 0.995) 41.17%, - $background-color-white 80.83% + var(--background-color) 80.83% ); // Shadow Definitions