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/neumorphism/button.scss b/src/styles/neumorphism/button.scss index 47be917e..ce1b6dc5 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,22 +91,8 @@ $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; -$neu-button-tertiary-box-shadow-active--dark: $neu-button-tertiary-box-shadow--dark !default; - -:root { - --neu-button-tertiary-box-shadow: #{$neu-button-tertiary-box-shadow}; - --neu-button-tertiary-box-shadow-active: #{$neu-button-tertiary-box-shadow-active}; - --neu-button-tertiary-box-shadow--dark: #{$neu-button-tertiary-box-shadow--dark}; - --neu-button-tertiary-box-shadow-active--dark: #{$neu-button-tertiary-box-shadow-active--dark}; -} - -[design-system-theme="dark"] { - --neu-button-tertiary-box-shadow: #{$neu-button-tertiary-box-shadow--dark}; - --neu-button-tertiary-box-shadow-active: #{$neu-button-tertiary-box-shadow-active--dark}; -} // Action button: common $neu-button-action-border-width: 0px !default; @@ -119,7 +105,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 +244,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); @@ -280,14 +268,19 @@ $neu-button-padding-mini: 3px 6px !default; border-color: $neu-button-tertiary-border-color; border-style: $neu-button-tertiary-border-style; border-width: $neu-button-tertiary-border-width; - box-shadow: var(--neu-button-tertiary-box-shadow); + box-shadow: $neu-button-tertiary-box-shadow; color: $neu-button-tertiary-text-color; &:hover, &:focus, &.focusing, &:active, &.s-pressed { 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 +318,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..10b431f0 100644 --- a/src/styles/neumorphism/card.scss +++ b/src/styles/neumorphism/card.scss @@ -2,6 +2,10 @@ &.s-status-#{$status} { color: var(--s-color-status-#{$status}); background: var(--s-color-status-#{$status}-background); + + [design-system-theme="dark"] & { + --s-color-status-#{$status}: var(--s-color-base-on-accent); + } } } 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; } } }