diff --git a/package.json b/package.json index 5207926a..bac62cfe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.15", + "version": "1.0.16", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/styles/button.scss b/src/styles/button.scss index dfc3a805..8c8c917a 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -197,7 +197,7 @@ $s-color-button-tertiary-background-focused--dark: var(--s-color-base-background } span { font-feature-settings: var(--s-font-feature-settings-heading); - @include font-weight(700, true); + @include font-weight(700); } &:not(.s-action) > span { display: flex; diff --git a/src/styles/form.scss b/src/styles/form.scss index b3b125ad..8dca0e92 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -25,8 +25,12 @@ } } > [class^="s-input"]:not(.s-disabled) { - background-color: var(--s-color-status-error-background); border-color: var(--s-color-status-error); + background-color: var(--s-color-status-error-background); + + [design-system-theme="dark"] & { + background-color: var(--s-color-base-background); + } .s-placeholder { color: var(--s-color-status-error); diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index 731df7c1..40f00388 100644 --- a/src/styles/neumorphism/button.scss +++ b/src/styles/neumorphism/button.scss @@ -73,7 +73,7 @@ $neu-button-secondary-border-color: transparent !default; $neu-button-secondary-border-color-active: $neu-button-secondary-border-color !default; // Secondary button: box-shadow $neu-button-secondary-box-shadow: var(--s-shadow-element-pressed) !default; -$neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default; +$neu-button-secondary-box-shadow-active: var(--s-shadow-element) !default; $neu-button-secondary-box-shadow-alternative: $neu-button-secondary-box-shadow !default; // Tertiary button: common @@ -91,6 +91,7 @@ $neu-button-tertiary-border-color: transparent !default; $neu-button-tertiary-border-color-active: $neu-button-tertiary-border-color !default; // Tertiary button: box-shadow $neu-button-tertiary-box-shadow: var(--s-shadow-element-pressed) !default; +$neu-button-tertiary-box-shadow-pressed: var(--s-shadow-element) !default; $neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default; // Dark Theme: Tertiary button: box-shadow $neu-button-tertiary-box-shadow--dark: var(--s-shadow-element-pressed--dark) !default; @@ -119,7 +120,7 @@ $neu-button-action-background-color-alternative: transparent !default; // Action button: text colors $neu-button-action-text-color: var(--s-color-base-content-tertiary) !default; $neu-button-action-text-color-hover: var(--s-color-base-content-secondary) !default; -$neu-button-action-text-color-pressed: var(--s-color-theme-accent) !default; +$neu-button-action-text-color-active: var(--s-color-theme-accent) !default; $neu-button-action-text-color-alternative: var(--s-color-base-content-tertiary) !default; $neu-button-action-text-color-alternative-active: var(--s-color-base-content-secondary) !default; $neu-button-action-primary-text-color: var(--s-color-base-on-accent) !default; @@ -258,6 +259,8 @@ $neu-button-padding-mini: 3px 6px !default; background: $neu-button-secondary-background-color-active; border-color: $neu-button-secondary-border-color-active; color: $neu-button-secondary-text-color-active; + } + &:active, &.s-pressed { box-shadow: $neu-button-secondary-box-shadow-active; } @include disabled($neu-button-secondary-border-width); @@ -287,7 +290,12 @@ $neu-button-padding-mini: 3px 6px !default; background: $neu-button-tertiary-background-color-active; border-color: $neu-button-tertiary-border-color-active; color: $neu-button-tertiary-text-color-active; - box-shadow: var(--neu-button-tertiary-box-shadow-active); + } + &:hover, &:focus, &.focusing { + box-shadow: $neu-button-tertiary-box-shadow-active; + } + &:active, &.s-pressed { + box-shadow: $neu-button-tertiary-box-shadow-pressed; } @include disabled($neu-button-tertiary-border-width); @@ -325,9 +333,11 @@ $neu-button-padding-mini: 3px 6px !default; &:active, &.s-pressed { background: $neu-button-action-background-color-pressed; border-color: $neu-button-action-border-color-pressed; - color: $neu-button-action-text-color-pressed; box-shadow: $neu-button-action-box-shadow-pressed; } + &:active { + color: $neu-button-action-text-color-active; + } @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed); &.s-alternative { color: $neu-button-action-text-color-alternative; diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss index e453741b..9ab59e6e 100644 --- a/src/styles/neumorphism/card.scss +++ b/src/styles/neumorphism/card.scss @@ -1,7 +1,14 @@ @mixin status ($status: 'success') { &.s-status-#{$status} { color: var(--s-color-status-#{$status}); - background: var(--s-color-status-#{$status}-background); + + &.s-primary { + background: var(--s-color-status-#{$status}-background); + + [design-system-theme="dark"] & { + --s-color-status-#{$status}: var(--s-color-base-on-accent); + } + } } } @@ -42,7 +49,7 @@ } } - &.s-primary { + &.s-primary.s-status-default { background: var(--s-color-utility-surface); &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus { diff --git a/src/styles/neumorphism/tabs.scss b/src/styles/neumorphism/tabs.scss index b744d1cf..842011bb 100644 --- a/src/styles/neumorphism/tabs.scss +++ b/src/styles/neumorphism/tabs.scss @@ -1,18 +1,11 @@ -$neu-tab-shadow: var(--s-shadow-element); -$neu-tab-shadow--dark: var(--s-shadow-element-pressed); -$neu-tabs-shadow: var(--s-shadow-element-pressed); -$neu-tabs-shadow--dark: var(--s-shadow-element); +$neu-tab-shadow: var(--s-shadow-element-pressed); +$neu-tabs-shadow: var(--s-shadow-element); :root { --neu-tab-shadow: #{$neu-tab-shadow}; --neu-tabs-shadow: #{$neu-tabs-shadow}; } -[design-system-theme="dark"] { - --neu-tab-shadow: #{$neu-tab-shadow--dark}; - --neu-tabs-shadow: #{$neu-tabs-shadow--dark}; -} - .s-tabs.neumorphic { .el-tabs { &__active-bar { diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss index f45275d2..7bffc002 100644 --- a/src/styles/theme/dark.scss +++ b/src/styles/theme/dark.scss @@ -27,9 +27,9 @@ $s-color-utility-body--dark: #5D2F73 !default; $s-color-utility-surface--dark: #592D71 !default; $s-color-utility-overlay--dark: rgba(41, 0, 71, 0.9) !default; // Status colors -$s-color-status-success--dark: #B9EBDB !default; -$s-color-status-warning--dark: #C6E2FF !default; -$s-color-status-error--dark: #FFD8EB !default; +$s-color-status-success--dark: #34AD87 !default; +$s-color-status-warning--dark: #479AEF !default; +$s-color-status-error--dark: #F754A3 !default; $s-color-status-success-background--dark: #34AD87 !default; $s-color-status-warning-background--dark: #479AEF !default; $s-color-status-error-background--dark: #F754A3 !default; diff --git a/src/styles/typography.scss b/src/styles/typography.scss index a339f627..76ee849d 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -1,64 +1,41 @@ .s-typography { &-input { - &-text { - font-size: var(--s-font-size-mini) !important; - line-height: var(--s-line-height-medium) !important; - font-weight: 300 !important; - - &--mini { - font-size: var(--s-font-size-extra-mini) !important; - line-height: var(--s-line-height-medium) !important; - font-weight: 300 !important; - } - } &-field { - font-size: var(--s-font-size-medium) !important; - line-height: var(--s-line-height-medium) !important; - font-weight: 400 !important; - - &--large { - font-size: var(--s-font-size-large) !important; - line-height: var(--s-line-height-small) !important; - font-weight: 800 !important; - } + font-size: var(--s-font-size-small); + line-height: var(--s-line-height-medium); + font-weight: 300; } } &-button { &--mini { - font-size: var(--s-font-size-mini) !important; - line-height: var(--s-line-height-extra-small) !important; - font-weight: 800 !important; + font-size: var(--s-font-size-mini); + line-height: var(--s-line-height-extra-small); + letter-spacing: var(--s-letter-spacing-small); + font-weight: 800; } &--small { - font-size: var(--s-font-size-small) !important; - line-height: var(--s-line-height-small) !important; - font-weight: 800 !important; + font-size: var(--s-font-size-small); + line-height: var(--s-line-height-small); + letter-spacing: var(--s-letter-spacing-small); + font-weight: 800; } &--medium { - font-size: var(--s-font-size-medium) !important; - line-height: var(--s-line-height-reset) !important; - font-weight: 800 !important; + font-size: var(--s-font-size-medium); + line-height: var(--s-line-height-reset); + letter-spacing: var(--s-letter-spacing-small); + font-weight: 800; } &--big { - font-size: var(--s-font-size-big) !important; - line-height: var(--s-line-height-small) !important; - font-weight: 800 !important; + font-size: var(--s-font-size-big); + line-height: var(--s-line-height-small); + letter-spacing: var(--s-letter-spacing-small); + font-weight: 800; } &--large { - font-size: var(--s-font-size-large) !important; - line-height: var(--s-line-height-reset) !important; - font-weight: 800 !important; - } - } - &-text { - font-size: var(--s-font-size-extra-small) !important; - line-height: var(--s-line-height-base) !important; - font-weight: 300 !important; - - &--mini { - font-size: var(--s-font-size-extra-mini) !important; - line-height: var(--s-line-height-mini) !important; - font-weight: 300 !important; + font-size: var(--s-font-size-large); + line-height: var(--s-line-height-reset); + letter-spacing: var(--s-letter-spacing-small); + font-weight: 700; } } }