@sankhyalabs/ez-design 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1062,25 +1062,25 @@ body {
1062
1062
  display: flex;
1063
1063
  flex-wrap: wrap;
1064
1064
  width: 100%;
1065
- border-radius: 12px;
1065
+ border-radius: var(--border--radius-medium);
1066
1066
  text-decoration: none; }
1067
1067
  .ez-box__container {
1068
1068
  display: flex;
1069
1069
  flex-wrap: wrap;
1070
- background-color: #fff;
1071
- padding: 24px;
1070
+ background-color: var(--background--xlight);
1071
+ padding: var(--space--large);
1072
1072
  width: 100%;
1073
- border-radius: 12px;
1074
- box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
1073
+ border-radius: var(--border--radius-medium);
1074
+ box-shadow: var(--shadow); }
1075
1075
  .ez-box__container--inverted {
1076
- background-color: #fff;
1077
- border-radius: 12px; }
1076
+ background-color: var(--background--xlight);
1077
+ border-radius: var(--border--radius-medium); }
1078
1078
  .ez-box__container--form {
1079
1079
  min-height: 300px; }
1080
1080
  .ez-box__container--hover {
1081
1081
  cursor: pointer; }
1082
1082
  .ez-box__container--hover:hover {
1083
- background-color: #f2faf8; }
1083
+ background-color: var(--color--primary-200); }
1084
1084
  .ez-box__container--small {
1085
1085
  width: 198px;
1086
1086
  height: 198px; }
@@ -1100,23 +1100,28 @@ body {
1100
1100
  display: flex;
1101
1101
  flex-wrap: wrap;
1102
1102
  align-items: center;
1103
- padding: 12px;
1104
- background-color: #fff;
1103
+ padding: var(--space--medium);
1104
+ background-color: var(--background--xlight);
1105
1105
  width: 100%; }
1106
1106
  .ez-box--shadow {
1107
- box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
1107
+ box-shadow: var(--shadow);
1108
1108
  border: none; }
1109
+ .ez-box--shadow-small {
1110
+ box-shadow: var(--shadow--small);
1111
+ background-color: var(--background--xlight); }
1112
+ .ez-box--shadow-small .ez-box__container {
1113
+ box-shadow: none; }
1109
1114
  .ez-box--no-border {
1110
1115
  border: none; }
1111
1116
  .ez-box--info--success {
1112
- background-color: #E7F6E0;
1113
- color: #157A00;
1114
- border-radius: 12px;
1117
+ background-color: var(--color-alert--success-50);
1118
+ color: var(--color-alert--success-800);
1119
+ border-radius: var(--border--radius-medium);
1115
1120
  padding: 2px 12px; }
1116
1121
  .ez-box--info--warning {
1117
- background-color: #fff7d5;
1118
- color: #8c6b00;
1119
- border-radius: 12px;
1122
+ background-color: var(--color--alert-warning-200);
1123
+ color: var(--color--alert-warning-900);
1124
+ border-radius: var(--border--radius-medium);
1120
1125
  padding: 2px 12px; }
1121
1126
 
1122
1127
  .ez-breadcrumb {