commons-assessment 12.0.0

package/src/lib/assets/theme/_theme.scss

@@ -0,0 +1,568 @@
+@use "sass:string";
+@use "./theme.global" as amTheme;
+
+@each $key, $value in amTheme.$default-config {
+
+  @if string.index(#{$key}, "box-shadow") {
+    .assessment-#{"" + $key} {
+      box-shadow: var(--assessment-#{$key}) !important;
+    }
+  }
+
+  @else if string.index(#{$key}, "border-radius") {
+    .assessment-#{"" + $key} {
+      border-radius: var(--assessment-#{$key}) !important;
+    }
+  }
+
+  @else if string.index(#{$key}, "border") {
+    .assessment-#{"" + $key} {
+      border: var(--assessment-#{$key}) !important;
+    }
+  }
+
+  @else if string.index(#{$key}, "padding") {
+    .assessment-#{"" + $key} {
+      padding: var(--assessment-#{$key}) !important;
+    }
+  }
+
+  @else {
+    .assessment-text-#{"" + $key} {
+      color: var(--assessment-#{$key}) !important;
+    }
+
+    .assessment-bg-#{"" + $key} {
+      background-color: var(--assessment-#{$key}) !important;
+    }
+  }
+}
+
+/* // 13px ? 12px */
+.assessment-text-regular-12 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.48rem + 0.3vw);
+  line-height: calc(0.9rem + 0.3vw);
+}
+
+.assessment-text-bold-12 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.48rem + 0.3vw);
+  line-height: calc(0.9rem + 0.3vw);
+}
+
+.assessment-text-semibold-12 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.48rem + 0.3vw);
+  line-height: calc(0.9rem + 0.3vw);
+}
+
+.assessment-text-semibold-11 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.48rem + 0.25vw);
+  line-height: calc(0.8rem + 0.25vw);
+}
+
+.assessment-text-medium-11 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.48rem + 0.25vw);
+  line-height: calc(0.8rem + 0.25vw);
+}
+
+.assessment-text-regular-11 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.48rem + 0.25vw);
+  line-height: calc(0.8rem + 0.25vw);
+}
+
+.assessment-text-medium-12 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.48rem + 0.3vw);
+  line-height: calc(0.9rem + 0.3vw);
+}
+
+.assessment-text-regular-13 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.64rem + 0.2vw) !important;
+  line-height: calc(0.9rem + 0.2vw) !important;
+}
+
+.assessment-text-bold-13 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.64rem + 0.2vw) !important;
+  line-height: calc(0.9rem + 0.2vw) !important;
+}
+
+.assessment-text-semibold-13 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.64rem + 0.2vw) !important;
+  line-height: calc(0.9rem + 0.2vw) !important;
+}
+
+.assessment-text-medium-13 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.64rem + 0.2vw) !important;
+  line-height: calc(0.9rem + 0.2vw) !important;
+}
+
+.assessment-text-regular-14 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.7rem + 0.2vw);
+  line-height: calc(1.2rem + 0.2vw);
+}
+
+.assessment-text-bold-14 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.7rem + 0.2vw);
+  line-height: calc(1.2rem + 0.2vw);
+}
+
+.assessment-text-medium-14 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.7rem + 0.2vw) !important;
+  line-height: calc(1.2rem + 0.2vw) !important;
+}
+
+.assessment-text-semibold-14 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.7rem + 0.2vw);
+  line-height: calc(1.2rem + 0.2vw);
+}
+
+.assessment-text-semibold-10 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.55rem + 0.1vw);
+  line-height: calc(1rem + 0.1vw);
+}
+
+.assessment-text-regular-10 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.55rem + 0.1vw) !important;
+  line-height: calc(1rem + 0.1vw);
+}
+
+.assessment-text-regular-15 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.85rem + 0.1vw);
+  line-height: calc(1.4rem + 0.1vw);
+}
+
+.assessment-text-medium-15 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.85rem + 0.1vw);
+  line-height: calc(1.25rem + 0.1vw);
+}
+
+.assessment-text-semibold-15 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.85rem + 0.1vw);
+  line-height: calc(1.25rem + 0.1vw);
+}
+
+.assessment-text-bold-15 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.85rem + 0.1vw);
+  line-height: calc(1.25rem + 0.1vw);
+}
+
+.assessment-text-regular-16 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.77rem + 0.25vw);
+  line-height: calc(1.25rem + 0.2vw);
+}
+
+.assessment-text-semibold-16 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.77rem + 0.25vw);
+  line-height: calc(1.25rem + 0.2vw);
+}
+
+.assessment-text-bold-16 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.77rem + 0.25vw);
+  line-height: calc(1.25rem + 0.2vw);
+}
+
+.assessment-text-medium-16 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.77rem + 0.25vw);
+  line-height: calc(1.25rem + 0.2vw);
+}
+
+.assessment-text-regular-20 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1rem + 0.3vw);
+  line-height: calc(1.2rem + 0.3vw);
+}
+
+.assessment-text-bold-20 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.3vw);
+  line-height: calc(1.2rem + 0.3vw);
+}
+
+.assessment-text-semibold-20 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.3vw);
+  line-height: calc(1.2rem + 0.3vw);
+}
+
+.assessment-text-medium-20 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.3vw);
+  line-height: calc(1.2rem + 0.3vw);
+}
+
+/* // 18px ? 14px ? 13px ? 12px */
+.assessment-text-medium-18 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.125vw) !important;
+  line-height: calc(1.5rem + 0.1vw) !important;
+}
+
+.assessment-text-regular-18 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.125vw) !important;
+  line-height: calc(1.5rem + 0.3vw) !important;
+}
+
+.assessment-text-bold-18 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.125vw);
+  line-height: calc(1.5rem + 0.1vw);
+}
+
+.assessment-text-semibold-18 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.125vw) !important;
+  line-height: calc(1.5rem + 0.1vw) !important;
+}
+
+.assessment-text-bold-34 {
+  overflow-wrap: break-word;
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(2rem + 0.15vw);
+  line-height: calc(2.5rem + 0.15vw);
+}
+
+.assessment-text-medium-34 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(2rem + 0.15vw);
+  line-height: calc(2.5rem + 0.15vw);
+}
+
+.assessment-text-bold-32 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.3rem + 0.75vw);
+  line-height: calc(1.625rem + 0.5vw);
+}
+
+.assessment-text-bold-22 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-regular-22 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-semibold-22 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-medium-22 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-bold-24 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.8rem + 0.75vw);
+  line-height: calc(0.9rem + 0.75vw);
+}
+
+.assessment-text-regular-24 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.8rem + 0.75vw);
+  line-height: calc(0.9rem + 0.75vw);
+}
+
+.assessment-text-semibold-24 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(0.8rem + 0.75vw);
+  line-height: calc(0.9rem + 0.75vw);
+}
+
+.assessment-text-medium-24 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(0.8rem + 0.75vw);
+  line-height: calc(1.2rem + 0.75vw);
+}
+
+.assessment-text-regular-26 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.5rem + 0.1vw);
+  line-height: calc(1.8rem + 0.1vw);
+}
+
+.assessment-text-medium-26 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.5rem + 0.1vw);
+  line-height: calc(1.8rem + 0.1vw);
+}
+
+.assessment-text-bold-26 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.5rem + 0.1vw);
+  line-height: calc(1.8rem + 0.1vw);
+}
+
+.assessment-text-semibold-26 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.55rem + 0.1vw);
+  line-height: calc(1.8rem + 0.1vw);
+}
+
+.assessment-text-regular-28 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.55rem + 0.2vw);
+  line-height: calc(2rem + 0.2vw);
+}
+
+.assessment-text-medium-28 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.55rem + 0.2vw);
+  line-height: calc(2rem + 0.2vw);
+}
+
+.assessment-text-semibold-28 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.55rem + 0.2vw);
+  line-height: calc(2rem + 0.2vw);
+  letter-spacing: 1;
+}
+
+.assessment-text-bold-28 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.55rem + 0.2vw);
+  line-height: calc(2rem + 0.2vw);
+}
+
+.assessment-text-regular-30 {
+  font-weight: 400;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-medium-30 {
+  font-weight: 500;
+  font-family: var(--assessment-font-family);
+  font-size: calc(1.5rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+}
+
+.assessment-text-bold-30 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.5rem + 0.4vw);
+  line-height: calc(2rem + 0.4vw);
+}
+
+.assessment-text-semibold-30 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(1.5rem + 0.4vw);
+  line-height: calc(1.5rem + 0.4vw);
+  letter-spacing: 0.5;
+}
+
+.assessment-text-bold-36 {
+  font-weight: 700;
+  font-family: var(--assessment-font-family) !important;
+  font-size: calc(2rem + 0.25vw);
+  line-height: calc(2.5rem + 0.3vw);
+}
+
+.assessment-text-semibold-36 {
+  font-weight: 600;
+  font-family: var(--assessment-font-family);
+  font-size: calc(2rem + 0.25vw);
+  line-height: calc(2.5rem + 0.3vw);
+}
+
+@media (min-height: 100vw) and (orientation: portrait) {
+
+  /* The height is greater than the width */
+  .assessment-text-bold-34 {
+    font-size: calc(1.8rem + 0.15vh);
+    line-height: calc(2.2rem + 0.15vh);
+  }
+
+  .assessment-text-bold-32 {
+    font-size: calc(1.3rem + 1vh);
+    line-height: calc(1.5rem + 1vh);
+  }
+
+  .assessment-text-semibold-30 {
+    font-size: calc(1.5rem + 0.4vh);
+    line-height: calc(1.8rem + 0.4vh);
+  }
+
+  .assessment-text-medium-24 {
+    line-height: 2.188rem;
+  }
+
+  .assessment-text-medium-24,
+  .assessment-text-regular-24,
+  .assessment-text-semibold-24,
+  .assessment-text-bold-24,
+  .assessment-text-light-24 {
+    font-size: calc(1.3rem + 0.5vh);
+    line-height: calc(1.8rem + 0.5vh);
+  }
+
+  .assessment-text-medium-18,
+  .assessment-text-regular-18,
+  .assessment-text-bold-18,
+  .assessment-text-semibold-18,
+  .assessment-text-light-18 {
+    font-size: calc(1rem + 0.1vh) !important;
+    line-height: calc(1.6rem + 0.1vh) !important;
+  }
+
+  .assessment-text-light-16,
+  .assessment-text-bold-16 {
+    font-size: calc(0.9rem + 0.3vh) !important;
+    line-height: calc(1.2rem + 0.3vh) !important;
+  }
+
+  .assessment-text-medium-16,
+  .assessment-text-semibold-16,
+  .assessment-text-regular-16 {
+    font-size: calc(0.9rem + 0.2vh) !important;
+    line-height: calc(1.4rem + 0.2vh) !important;
+  }
+
+  .assessment-text-regular-15,
+  .assessment-text-semibold-15,
+  .assessment-text-bold-15,
+  .assessment-text-light-15 {
+    font-size: calc(0.8rem + 0.2vh);
+    line-height: calc(1.27rem + 0.2vh);
+  }
+
+  .assessment-text-medium-15 {
+    font-size: calc(0.8rem + 0.2vh);
+    line-height: calc(1.27rem + 0.2vh);
+  }
+
+  .assessment-text-medium-12,
+  .assessment-text-regular-12,
+  .assessment-text-semibold-12,
+  .assessment-text-bold-12,
+  .assessment-text-medium-upper-12,
+  .assessment-text-light-12 {
+    font-size: calc(0.5rem + 0.4vh);
+    line-height: calc(0.8rem + 0.4vh);
+  }
+
+  .assessment-text-medium-14,
+  .assessment-text-regular-14,
+  .assessment-text-light-14,
+  .assessment-text-medium-upper-14,
+  .assessment-text-semibold-14,
+  .assessment-text-bold-14 {
+    font-size: calc(0.8rem + 0.1vh) !important;
+    line-height: calc(1.2rem + 0.2vh) !important;
+  }
+
+  .assessment-text-regular-13,
+  .assessment-text-medium-13,
+  .assessment-text-semibold-13,
+  .assessment-text-bold-13,
+  .assessment-text-light-13 {
+    font-size: calc(0.7rem + 0.2vh) !important;
+    line-height: calc(1rem + 0.3vh) !important;
+  }
+
+  .assessment-text-regular-11,
+  .assessment-text-medium-11,
+  .assessment-text-semibold-11,
+  .assessment-text-bold-11,
+  .assessment-text-light-11 {
+    font-size: calc(0.5rem + 0.2vh) !important;
+    line-height: calc(0.8rem + 0.2vh) !important;
+  }
+}
+
+.assessment-btn-primary {
+  background-color: var(--assessment-primary-one);
+  color: var(--assessment-white);
+  border: 0.064rem solid var(--assessment-primary-one);
+  border-radius: var(--assessment-border-radius-two);
+}
+
+.assessment-btn-primary-transparent {
+  background-color: var(--assessment-white);
+  color: var(--assessment-primary-one);
+  border-radius: var(--assessment-border-radius-two);
+  border: 0.064rem solid var(--assessment-primary-one);
+}