@ironsource/shared-ui 1.4.3 → 2.0.0-rc.1

package/styles/v4/fonts.scss

@@ -0,0 +1,258 @@
+/**
+ * Style v4 Typography
+ * -----------------------------------------------------------------------------
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+// font-family
+$inter: 'Inter', sans-serif;
+
+%font-bold {
+  font-family: $inter;
+  font-weight: 700;
+}
+%font-semibold {
+  font-family: $inter;
+  font-weight: 600;
+}
+%font-medium {
+  font-family: $inter;
+  font-weight: 500;
+}
+%font-regular {
+  font-family: $inter;
+  font-weight: 400;
+}
+
+// region heading
+%font-title {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  letter-spacing: -0.055rem;
+  @extend %font-semibold;
+}
+%font-heading-1 {
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.0285rem;
+  @extend %font-semibold;
+}
+%font-heading-2 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.01575rem;
+  @extend %font-semibold;
+}
+%font-heading-3 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.011rem;
+  @extend %font-semibold;
+}
+%font-heading-4 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  letter-spacing: unset;
+  @extend %font-semibold;
+}
+%font-heading-5 {
+  font-size: 0.8125rem;
+  line-height: 16px;
+  letter-spacing: unset;
+  @extend %font-semibold;
+}
+%font-heading-6 {
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  letter-spacing: 0;
+  @extend %font-semibold;
+}
+// endregion
+
+// region body
+%font-body-1 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00525rem;
+  @extend %font-regular;
+}
+%font-body-2 {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00244rem;
+  @extend %font-regular;
+}
+// endregion
+
+// region subtitle
+%font-subtitle-1 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00525rem;
+  @extend %font-medium;
+}
+%font-subtitle-2 {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00244rem;
+  @extend %font-medium;
+}
+// endregion
+
+// region chart
+%font-chart-1 {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.015rem;
+  @extend %font-bold;
+}
+%font-chart-2 {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.0125rem;
+  @extend %font-bold;
+}
+// endregion
+
+
+// region other
+%font-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.00875rem;
+  @extend %font-semibold;
+}
+%font-overline {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.045rem;
+  text-transform: uppercase;
+  @extend %font-medium;
+}
+%font-caption {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  @extend %font-regular;
+}
+%font-table-label {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.00813rem;
+  @extend %font-semibold;
+}
+%font-input-label {
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  letter-spacing: 0.00813rem;
+  @extend %font-medium;
+}
+%font-tab-label1 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  @extend %font-medium;
+}
+%font-tab-label2 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  @extend %font-bold;
+}
+%font-chip-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  @extend %font-semibold;
+}
+// endregion
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+.font-title {
+  @extend %font-title;
+}
+
+.font-heading-1 {
+  @extend %font-heading-1;
+}
+
+.font-heading-2 {
+  @extend %font-heading-2;
+}
+
+.font-heading-3 {
+  @extend %font-heading-3;
+}
+
+.font-heading-4 {
+  @extend %font-heading-4;
+}
+
+.font-heading-5 {
+  @extend %font-heading-5;
+}
+
+.font-heading-6 {
+  @extend %font-heading-6;
+}
+
+.font-body-1 {
+  @extend %font-body-1;
+}
+
+.font-body-2 {
+  @extend %font-body-2;
+}
+
+.font-subtitle-1 {
+  @extend %font-subtitle-1;
+}
+
+.font-subtitle-2 {
+  @extend %font-subtitle-2;
+}
+
+.font-chart-1 {
+  @extend %font-chart-1;
+}
+
+.font-chart-2 {
+  @extend %font-chart-2;
+}
+
+.font-button {
+  @extend %font-button;
+}
+
+.font-overline {
+  @extend %font-overline;
+}
+
+.font-caption {
+  @extend %font-caption;
+}
+
+.font-table-label {
+  @extend %font-table-label;
+}
+
+.font-input-label {
+  @extend %font-input-label;
+}
+
+.font-tab-label1 {
+  @extend %font-tab-label1;
+}
+
+.font-tab-label2 {
+  @extend %font-tab-label2;
+}
+
+.font-chip-label {
+  @extend %font-chip-label;
+}

package/components/button/Button.vue.js

@@ -1,65 +0,0 @@
-import { defineComponent, computed, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, unref, createCommentVNode, renderSlot } from 'vue';
-import Icon from '../icon/Icon.vue.js';
-import ButtonBase from './ButtonBase.vue.js';
-import { iconSizeMap } from './consts.vue.js';
-/* empty css                                                        */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Button.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Button",
-  props: {
-    leftIconName: { default: null },
-    rightIconName: { default: null },
-    size: { default: "md" },
-    testId: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const computedIconWidth = computed(() => `${iconSizeMap[props.size]}px`);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(ButtonBase, mergeProps({
-        class: [
-          __props.size,
-          {
-            "with-left-icon": !!__props.leftIconName,
-            "with-right-icon": !!__props.rightIconName
-          }
-        ],
-        size: __props.size,
-        "data-testid": props.testId
-      }, _ctx.$attrs), createSlots({
-        default: withCtx(() => [
-          createElementVNode("div", {
-            class: normalizeClass({
-              flex: __props.leftIconName || __props.rightIconName
-            })
-          }, [
-            __props.leftIconName ? (openBlock(), createBlock(unref(Icon), {
-              key: 0,
-              name: __props.leftIconName,
-              "font-size": unref(computedIconWidth)
-            }, null, 8, ["name", "font-size"])) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "default", {}, void 0, true),
-            __props.rightIconName ? (openBlock(), createBlock(unref(Icon), {
-              key: 1,
-              name: __props.rightIconName,
-              "font-size": unref(computedIconWidth)
-            }, null, 8, ["name", "font-size"])) : createCommentVNode("", true)
-          ], 2)
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots.loader ? {
-          name: "loader",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "loader", {}, void 0, true)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["class", "size", "data-testid"]);
-    };
-  }
-});
-var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-195cffac"]]);
-
-export { Button as default };