@deriv-web-design/ui 0.0.8 → 0.0.10

package/dist/index.css

@@ -10,7 +10,7 @@
   border: 2px solid transparent;
   border-radius: var(--radius-full);
   font-family: var(--font-family-base);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-extra-bold);
   line-height: 1;
   text-align: center;
@@ -574,34 +574,65 @@
   gap: var(--spacing-8);
   border-radius: var(--radius-md);
   border: 1px solid transparent;
-  background: var(--field-surface-outline);
-  border-color: var(--field-border-default);
   box-sizing: border-box;
   cursor: text;
   transition: background-color 100ms ease, border-color 100ms ease;
 }
-.sf-wrapper.neutral:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.outline {
+  background: var(--field-surface-outline);
+  border-color: var(--field-border-default);
+}
+.sf-wrapper.fill {
+  background: var(--field-surface-fill);
+}
+.sf-wrapper.neutral.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-hover);
 }
-.sf-wrapper.neutral:focus-within:not([data-disabled]) {
+.sf-wrapper.neutral.fill:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--field-surface-fill-hover);
+}
+.sf-wrapper.neutral.outline:focus-within:not([data-disabled]) {
+  border-color: var(--field-border-focus);
+}
+.sf-wrapper.neutral.fill:focus-within:not([data-disabled]) {
   border-color: var(--field-border-focus);
 }
-.sf-wrapper.fail {
+.sf-wrapper.fail.outline {
   border-color: var(--field-border-fail-default);
 }
-.sf-wrapper.fail:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.fail.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-fail-hover);
 }
-.sf-wrapper.fail:focus-within:not([data-disabled]) {
+.sf-wrapper.fail.outline:focus-within:not([data-disabled]) {
+  border-color: var(--field-border-fail-focus);
+}
+.sf-wrapper.fail.fill {
+  background: var(--field-surface-fail);
+}
+.sf-wrapper.fail.fill:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--field-surface-fail-hover);
+}
+.sf-wrapper.fail.fill:focus-within:not([data-disabled]) {
+  background: var(--field-surface-fail);
   border-color: var(--field-border-fail-focus);
 }
-.sf-wrapper.success {
+.sf-wrapper.success.outline {
   border-color: var(--field-border-success-default);
 }
-.sf-wrapper.success:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.success.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-success-hover);
 }
-.sf-wrapper.success:focus-within:not([data-disabled]) {
+.sf-wrapper.success.outline:focus-within:not([data-disabled]) {
+  border-color: var(--field-border-success-focus);
+}
+.sf-wrapper.success.fill {
+  background: var(--field-surface-success);
+}
+.sf-wrapper.success.fill:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--field-surface-success-hover);
+}
+.sf-wrapper.success.fill:focus-within:not([data-disabled]) {
+  background: var(--field-surface-success);
   border-color: var(--field-border-success-focus);
 }
 .sf-wrapper[data-disabled] {
@@ -3121,7 +3152,7 @@
   min-height: var(--ctab-section-min-height);
   max-width: var(--ctab-max-width);
   margin: 0 auto;
-  padding: 0;
+  padding: 0 var(--spacing-24);
   box-sizing: border-box;
 }
 @media (min-width: 992px) {
@@ -3240,8 +3271,6 @@
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   height: var(--navbar-height);
-  max-width: var(--navbar-max-width);
-  margin: 0 auto;
   padding: 0 var(--spacing-24);
   box-sizing: border-box;
 }
@@ -3274,7 +3303,7 @@
 .navbar__pill {
   display: flex;
   align-items: center;
-  gap: var(--spacing-16);
+  gap: var(--spacing-8);
   padding: var(--spacing-8);
   border-radius: var(--navbar-pill-radius);
   backdrop-filter: blur(8px);
@@ -3294,13 +3323,13 @@
 .navbar__nav-group {
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-4);
+  padding: 0;
 }
 .navbar__nav-item {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
-  padding: var(--spacing-8) var(--spacing-12);
+  padding: var(--spacing-8);
   height: 2.5rem;
   border: none;
   border-radius: var(--radius-full);
@@ -3339,65 +3368,6 @@
 .navbar--dark .navbar__pill .navbar__lang-globe {
   filter: brightness(0) invert(1);
 }
-.navbar__lang-wrapper {
-  position: relative;
-}
-.navbar__lang-dropdown {
-  position: absolute;
-  top: calc(100% + var(--spacing-16));
-  right: 0;
-  transform: translateY(-8px) scale(0.96);
-  width: 36rem;
-  background-color: var(--color-slate-50);
-  border: 1px solid var(--color-slate-100);
-  border-radius: var(--spacing-24);
-  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.04), 0px -14px 16px 2px rgba(0, 0, 0, 0.02);
-  padding: var(--spacing-16) var(--spacing-24);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-4);
-  z-index: var(--navbar-z-dropdown);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-.navbar__lang-dropdown--open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  pointer-events: auto;
-}
-.navbar__lang-option {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  width: 100%;
-  padding: var(--spacing-8) var(--spacing-12);
-  border: none;
-  border-radius: var(--radius-md);
-  background: transparent;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-md);
-  color: var(--color-slate-1200);
-  text-align: left;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.navbar__lang-option .navbar__lang-option-arrow {
-  opacity: 0;
-  transform: translateX(-6px);
-  transition: opacity 160ms ease, transform 160ms ease;
-  flex-shrink: 0;
-}
-.navbar__lang-option:hover .navbar__lang-option-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-.navbar__lang-option--active {
-  color: var(--link-coral-color);
-  font-weight: var(--font-weight-semi-bold);
-}
 .navbar__actions {
   grid-column: 3;
   grid-row: 1;
@@ -3474,15 +3444,6 @@
   display: flex;
   overflow: hidden;
   z-index: var(--navbar-z-dropdown);
-  opacity: 0;
-  transform: scale(0.96) translateY(-8px);
-  pointer-events: none;
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-.navbar__dropdown--open {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-  pointer-events: auto;
 }
 .navbar__dropdown-inner {
   display: flex;
@@ -3644,12 +3605,6 @@
   flex-direction: column;
   font-family: var(--font-family-base);
   box-sizing: border-box;
-  pointer-events: none;
-  transform: translateY(-100%);
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.navbar__drawer--open {
-  transform: translateY(0);
   pointer-events: all;
 }
 .navbar__drawer-header {
@@ -3718,17 +3673,16 @@
   transform: rotate(180deg);
 }
 .navbar__drawer-panel {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.navbar__drawer-panel--open {
-  grid-template-rows: 1fr;
+  overflow: hidden;
 }
 .navbar__drawer-panel-inner {
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: var(--spacing-8) 0 var(--spacing-16);
+  background-color: var(--color-slate-50);
 }
-display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--spacing-8) 0 var(--spacing-16); background-color: var(--color-slate-50); } .navbar__drawer-panel-cols {
+.navbar__drawer-panel-cols {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
@@ -3865,60 +3819,6 @@ display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--sp
   cursor: pointer;
   text-align: left;
 }
-.navbar__drawer-lang-label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-.navbar__lang-globe--dark {
-  filter: none !important;
-}
-.navbar__drawer-lang-grid {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.navbar__drawer-lang-grid--open {
-  grid-template-rows: 1fr;
-}
-.navbar__drawer-lang-grid-inner {
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-4);
-  padding: var(--spacing-8) 0 var(--spacing-16);
-}
-.navbar__drawer-lang-option {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  width: 100%;
-  padding: var(--spacing-8) var(--spacing-12);
-  border: none;
-  border-radius: var(--radius-md);
-  background: transparent;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-md);
-  color: var(--color-slate-1200);
-  text-align: left;
-  cursor: pointer;
-}
-.navbar__drawer-lang-option .navbar__lang-option-arrow {
-  opacity: 0;
-  transform: translateX(-6px);
-  transition: opacity 160ms ease, transform 160ms ease;
-  flex-shrink: 0;
-}
-.navbar__drawer-lang-option:hover .navbar__lang-option-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-.navbar__drawer-lang-option--active {
-  color: var(--link-coral-color);
-  font-weight: var(--font-weight-semi-bold);
-}
 .navbar__drawer-footer {
   display: flex;
   flex-direction: column;