@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/assets/tokens/colors-primitives.json

@@ -0,0 +1,155 @@
+{
+  "color": {
+    "gray": {
+      "0": { "value": "#FFFFFF" },
+      "1": { "value": "#F5F5F5" },
+      "2": { "value": "#EBEBEB" },
+      "3": { "value": "#E0E0E0" },
+      "4": { "value": "#D6D6D6" },
+      "5": { "value": "#C2C2C2" },
+      "6": { "value": "#ADADAD" },
+      "7": { "value": "#999999" },
+      "8": { "value": "#858585" },
+      "9": { "value": "#707070" },
+      "10": { "value": "#5C5C5C" },
+      "11": { "value": "#3D3D3D" },
+      "12": { "value": "#1F1F1F" },
+      "13": { "value": "#000000" }
+    },
+    "teal": {
+      "1": { "value": "#E9FAF8" },
+      "2": { "value": "#CFF8F4" },
+      "3": { "value": "#ABF2EB" },
+      "4": { "value": "#8DEAE3" },
+      "5": { "value": "#66DBD3" },
+      "6": { "value": "#40CAC2" },
+      "7": { "value": "#10B6AF" },
+      "8": { "value": "#01A29B" },
+      "9": { "value": "#018D88" },
+      "10": { "value": "#017873" },
+      "11": { "value": "#016460" },
+      "12": { "value": "#0D504D" },
+      "13": { "value": "#133D3B" }
+    },
+    "green": {
+      "1": { "value": "#E9FCE3" },
+      "2": { "value": "#CEFDC0" },
+      "3": { "value": "#AFF79E" },
+      "4": { "value": "#97EF86" },
+      "5": { "value": "#74E26C" },
+      "6": { "value": "#4FD051" },
+      "7": { "value": "#28BC37" },
+      "8": { "value": "#08A822" },
+      "9": { "value": "#019213" },
+      "10": { "value": "#017D10" },
+      "11": { "value": "#016810" },
+      "12": { "value": "#01540E" },
+      "13": { "value": "#01410B" }
+    },
+    "blue": {
+      "1": { "value": "#F1F8FD" },
+      "2": { "value": "#E1F3FF" },
+      "3": { "value": "#CBE9FF" },
+      "4": { "value": "#B6DFFF" },
+      "5": { "value": "#97CFFE" },
+      "6": { "value": "#79BCFB" },
+      "7": { "value": "#5AA8F7" },
+      "8": { "value": "#3993F4" },
+      "9": { "value": "#157BF4" },
+      "10": { "value": "#0366DD" },
+      "11": { "value": "#0155B7" },
+      "12": { "value": "#014592" },
+      "13": { "value": "#013672" }
+    },
+    "purple": {
+      "1": { "value": "#F9F5FD" },
+      "2": { "value": "#F5EAFE" },
+      "3": { "value": "#EDDCFE" },
+      "4": { "value": "#E5CFFE" },
+      "5": { "value": "#DABAFD" },
+      "6": { "value": "#CBA3FC" },
+      "7": { "value": "#BC8AFB" },
+      "8": { "value": "#AD71F8" },
+      "9": { "value": "#9C56F3" },
+      "10": { "value": "#883CE6" },
+      "11": { "value": "#7225D2" },
+      "12": { "value": "#5C12B6" },
+      "13": { "value": "#460B93" }
+    },
+    "red": {
+      "1": { "value": "#FDF6F5" },
+      "2": { "value": "#FFEDEA" },
+      "3": { "value": "#FFDFD9" },
+      "4": { "value": "#FFD0C7" },
+      "5": { "value": "#FFBBAD" },
+      "6": { "value": "#FF9E8B" },
+      "7": { "value": "#FF7F68" },
+      "8": { "value": "#F95D47" },
+      "9": { "value": "#EC3727" },
+      "10": { "value": "#D31A15" },
+      "11": { "value": "#B40202" },
+      "12": { "value": "#940303" },
+      "13": { "value": "#720000" }
+    },
+    "orange": {
+      "1": { "value": "#FDF5E9" },
+      "2": { "value": "#FFEDCD" },
+      "3": { "value": "#FFE0AE" },
+      "4": { "value": "#FED392" },
+      "5": { "value": "#FEBC64" },
+      "6": { "value": "#FFA138" },
+      "7": { "value": "#F78612" },
+      "8": { "value": "#E57001" },
+      "9": { "value": "#CC5E01" },
+      "10": { "value": "#B24D01" },
+      "11": { "value": "#963E01" },
+      "12": { "value": "#7B3001" },
+      "13": { "value": "#622401" }
+    },
+    "yellow": {
+      "1": { "value": "#FBF7D4" },
+      "2": { "value": "#FDF5AD" },
+      "3": { "value": "#FAEC6D" },
+      "4": { "value": "#FADE1E" },
+      "5": { "value": "#E9C701" },
+      "6": { "value": "#D8B401" },
+      "7": { "value": "#C5A001" },
+      "8": { "value": "#B18D01" },
+      "9": { "value": "#9C7901" },
+      "10": { "value": "#866701" },
+      "11": { "value": "#715401" },
+      "12": { "value": "#5C4401" },
+      "13": { "value": "#493401" }
+    },
+    "cyan": {
+      "1": { "value": "#E6FAFD" },
+      "2": { "value": "#C6F9FF" },
+      "3": { "value": "#A5F1FF" },
+      "4": { "value": "#89E8FB" },
+      "5": { "value": "#61D9F4" },
+      "6": { "value": "#34C6E9" },
+      "7": { "value": "#13B1DB" },
+      "8": { "value": "#029DC9" },
+      "9": { "value": "#0187B5" },
+      "10": { "value": "#0172A0" },
+      "11": { "value": "#015E8A" },
+      "12": { "value": "#014B74" },
+      "13": { "value": "#013A5E" }
+    },
+    "pink": {
+      "1": { "value": "#FDF5F7" },
+      "2": { "value": "#FFEBF2" },
+      "3": { "value": "#FFDFEB" },
+      "4": { "value": "#FFC8DC" },
+      "5": { "value": "#FEB2CD" },
+      "6": { "value": "#FF98BF" },
+      "7": { "value": "#FE78AC" },
+      "8": { "value": "#EF5997" },
+      "9": { "value": "#DE387F" },
+      "10": { "value": "#CA226A" },
+      "11": { "value": "#AF0956" },
+      "12": { "value": "#8F0246" },
+      "13": { "value": "#74043B" }
+    }
+  }
+}

package/src/assets/tokens/colors-semantic-dark.json

@@ -0,0 +1,55 @@
+{
+  "colorDark": {
+    "bg": {
+      "base": { "value": "{color.gray.12}" },
+      "base-soft": { "value": "rgba(255, 255, 255, 0.05)" },
+      "muted": { "value": "rgba(255, 255, 255, 0.10)" },
+      "accent-plain": { "value": "rgba(1, 162, 155, 0.18)" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "rgba(21, 123, 244, 0.18)" },
+      "success": { "value": "rgba(1, 146, 19, 0.18)" },
+      "warning": { "value": "rgba(156, 121, 1, 0.18)" },
+      "critical": { "value": "rgba(236, 55, 39, 0.18)" },
+      "red-plain": { "value": "rgba(236, 55, 39, 0.20)" },
+      "red-strong": { "value": "{color.red.9}" },
+      "orange-plain": { "value": "rgba(229, 112, 1, 0.20)" },
+      "orange-strong": { "value": "{color.orange.8}" },
+      "yellow-plain": { "value": "rgba(156, 121, 1, 0.20)" },
+      "yellow-strong": { "value": "{color.yellow.8}" },
+      "green-plain": { "value": "rgba(1, 146, 19, 0.20)" },
+      "green-strong": { "value": "{color.green.8}" },
+      "teal-plain": { "value": "rgba(1, 162, 155, 0.18)" },
+      "teal-strong": { "value": "{color.teal.8}" },
+      "blue-plain": { "value": "rgba(21, 123, 244, 0.20)" },
+      "blue-strong": { "value": "{color.blue.8}" },
+      "purple-plain": { "value": "rgba(156, 86, 243, 0.20)" },
+      "purple-strong": { "value": "{color.purple.8}" },
+      "pink-plain": { "value": "rgba(222, 56, 127, 0.20)" },
+      "pink-strong": { "value": "{color.pink.8}" },
+      "inverted": { "value": "{color.gray.0}" }
+    },
+    "fg": {
+      "base": { "value": "{color.gray.4}" },
+      "emphasized": { "value": "{color.gray.0}" },
+      "muted": { "value": "{color.gray.7}" },
+      "inverted": { "value": "{color.gray.12}" },
+      "on-primary": { "value": "{color.gray.0}" },
+      "accent": { "value": "{color.teal.7}" },
+      "info": { "value": "{color.blue.7}" },
+      "success": { "value": "{color.green.7}" },
+      "warning": { "value": "{color.yellow.7}" },
+      "critical": { "value": "{color.red.7}" }
+    },
+    "border": {
+      "base": { "value": "rgba(255, 255, 255, 0.16)" },
+      "muted": { "value": "rgba(255, 255, 255, 0.10)" },
+      "emphasized": { "value": "rgba(255, 255, 255, 0.24)" },
+      "accent-plain": { "value": "rgba(141, 234, 227, 0.24)" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "rgba(182, 223, 255, 0.24)" },
+      "success": { "value": "rgba(151, 239, 134, 0.24)" },
+      "warning": { "value": "rgba(250, 222, 30, 0.24)" },
+      "critical": { "value": "rgba(255, 208, 199, 0.24)" }
+    }
+  }
+}

package/src/assets/tokens/colors-semantic.json

@@ -0,0 +1,55 @@
+{
+  "color": {
+    "bg": {
+      "base": { "value": "{color.gray.0}" },
+      "base-soft": { "value": "{color.gray.1}" },
+      "muted": { "value": "{color.gray.2}" },
+      "accent-plain": { "value": "{color.teal.2}" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.1}" },
+      "success": { "value": "{color.green.1}" },
+      "warning": { "value": "{color.yellow.1}" },
+      "critical": { "value": "{color.red.1}" },
+      "red-plain": { "value": "{color.red.3}" },
+      "red-strong": { "value": "{color.red.9}" },
+      "orange-plain": { "value": "{color.orange.3}" },
+      "orange-strong": { "value": "{color.orange.8}" },
+      "yellow-plain": { "value": "{color.yellow.2}" },
+      "yellow-strong": { "value": "{color.yellow.8}" },
+      "green-plain": { "value": "{color.green.3}" },
+      "green-strong": { "value": "{color.green.8}" },
+      "teal-plain": { "value": "{color.teal.3}" },
+      "teal-strong": { "value": "{color.teal.8}" },
+      "blue-plain": { "value": "{color.blue.3}" },
+      "blue-strong": { "value": "{color.blue.8}" },
+      "purple-plain": { "value": "{color.purple.3}" },
+      "purple-strong": { "value": "{color.purple.8}" },
+      "pink-plain": { "value": "{color.pink.3}" },
+      "pink-strong": { "value": "{color.pink.8}" },
+      "inverted": { "value": "{color.gray.12}" }
+    },
+    "fg": {
+      "base": { "value": "{color.gray.11}" },
+      "emphasized": { "value": "{color.gray.12}" },
+      "muted": { "value": "{color.gray.9}" },
+      "inverted": { "value": "{color.gray.0}" },
+      "on-primary": { "value": "{color.gray.0}" },
+      "accent": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.9}" },
+      "success": { "value": "{color.green.9}" },
+      "warning": { "value": "{color.yellow.9}" },
+      "critical": { "value": "{color.red.9}" }
+    },
+    "border": {
+      "base": { "value": "{color.gray.3}" },
+      "muted": { "value": "{color.gray.2}" },
+      "emphasized": { "value": "{color.gray.7}" },
+      "accent-plain": { "value": "{color.teal.5}" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.5}" },
+      "success": { "value": "{color.green.5}" },
+      "warning": { "value": "{color.yellow.5}" },
+      "critical": { "value": "{color.red.6}" }
+    }
+  }
+}

package/src/assets/tokens/fonts.json

@@ -0,0 +1,70 @@
+{
+  "font": {
+    "size": {
+      "value": "16px"
+    },
+    "family": {
+      "value": "Inter, sans-serif"
+    },
+    "weight": {
+      "bold": {
+        "value": "600"
+      },
+      "semibold": {
+        "value": "600"
+      },
+      "medium": {
+        "value": "500"
+      },
+      "regular": {
+        "value": "400"
+      }
+    },
+    "display": {
+      "1": {
+        "value": "{font.weight.semibold} calc(1.5 * {font.size}) / 1.4 {font.family}"
+      },
+      "2": {
+        "value": "{font.weight.semibold} calc(1.25 * {font.size}) / 1.4 {font.family}"
+      },
+      "3": {
+        "value": "{font.weight.semibold} calc(1 * {font.size}) / 1.4 {font.family}"
+      },
+      "4": {
+        "value": "{font.weight.regular} calc(1 * {font.size}) / 1.4 {font.family}"
+      }
+    },
+    "body": {
+      "value": "{font.weight.regular} calc(0.875 * {font.size}) / 1.4 {font.family}"
+    },
+    "emphasis": {
+      "value": "{font.weight.medium} calc(0.875 * {font.size}) / 1.4 {font.family}"
+    },
+    "action": {
+      "value": "{font.weight.semibold} calc(0.875 * {font.size}) / 1.4 {font.family}"
+    },
+    "caption": {
+      "1": {
+        "value": "{font.weight.medium} calc(0.75 * {font.size}) / 1.4 {font.family}"
+      },
+      "2": {
+        "value": "{font.weight.regular} calc(0.75 * {font.size}) / 1.4 {font.family}"
+      }
+    },
+    "letterSpacing": {
+      "display": {
+        "1": { "value": "-4%" },
+        "2": { "value": "-4%" },
+        "3": { "value": "-2%" },
+        "4": { "value": "-2%" }
+      },
+      "body": { "value": "-1%" },
+      "emphasis": { "value": "-1%" },
+      "action": { "value": "-1%" },
+      "caption": {
+        "1": { "value": "0" },
+        "2": { "value": "0" }
+      }
+    }
+  }
+}

package/src/assets/tokens/icon-sizes.json

@@ -0,0 +1,22 @@
+{
+    "icon-size": {
+        "3": {
+            "value": "0.75 * {font.size} /* 12px */"
+        },
+        "4": {
+            "value": "{font.size} /* 16px */"
+        },
+        "5": {
+            "value": "1.25 * {font.size} /* 20px */"
+        },
+        "6": {
+            "value": "1.5 * {font.size} /* 24px */"
+        },
+        "7": {
+            "value": "2 * {font.size} /* 32px */"
+        },
+        "10": {
+            "value": "2.5 * {font.size} /* 40px */"
+        }
+    }
+}

package/src/assets/tokens/radii.json

@@ -0,0 +1,28 @@
+{
+    "radius": {
+        "0": {
+            "value": "0 /* 0px */",
+            "type": "size"
+        },
+        "1": {
+            "value": "0.25 * {font.size} /* 4px */",
+            "type": "size"
+        },
+        "2": {
+            "value": "0.5 * {font.size} /* 8px */",
+            "type": "size"
+        },
+        "3": {
+            "value": "0.75 * {font.size} /* 12px */",
+            "type": "size"
+        },
+        "4": {
+            "value": "1 * {font.size} /* 16px */",
+            "type": "size"
+        },
+        "full": {
+            "value": "1000px",
+            "type": "size"
+        }
+    }
+}

package/src/assets/tokens/shadows.json

@@ -0,0 +1,10 @@
+{
+    "shadow": {
+        "1": {
+            "value": "0px 0.25 * {font.size} /* 4px */ {font.size} /* 16px */ 0px rgba(0, 0, 0, 0.16)"
+        },
+        "2": {
+            "value": "0px 1.5 * {font.size} /* 24px */ 3 * {font.size} /* 48px */ 0px rgba(0, 0, 0, 0.16)"
+        }
+    }
+}

package/src/assets/tokens/spaces.json

@@ -0,0 +1,46 @@
+{
+  "space": {
+    "0": {
+      "value": "0 /* 0px */"
+    },
+    "05": {
+      "value": "0.125 * {font.size} /* 2px */"
+    },
+    "1": {
+      "value": "0.25 * {font.size} /* 4px */"
+    },
+    "2": {
+      "value": "0.5 * {font.size} /* 8px */"
+    },
+    "3": {
+      "value": "0.75 * {font.size} /* 12px */"
+    },
+    "4": {
+      "value": "1 * {font.size} /* 16px */"
+    },
+    "5": {
+      "value": "1.25 * {font.size} /* 20px */"
+    },
+    "6": {
+      "value": "1.5 * {font.size} /* 24px */"
+    },
+    "7": {
+      "value": "1.75 * {font.size} /* 28px */"
+    },
+    "8": {
+      "value": "2 * {font.size} /* 32px */"
+    },
+    "10": {
+      "value": "2.5 * {font.size} /* 40px */"
+    },
+    "12": {
+      "value": "3 * {font.size} /* 48px */"
+    },
+    "16": {
+      "value": "4 * {font.size} /* 64px */"
+    },
+    "20": {
+      "value": "5 * {font.size} /* 80px */"
+    }
+  }
+}

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,149 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    class="unnnic-accordion"
+    @click="$emit('update:open', !open)"
+  >
+    <div class="header">
+      <UnnnicIcon
+        :icon="open ? 'subtract-circle-1' : 'add-circle-1'"
+        scheme="fg-base"
+        size="md"
+      />
+
+      <div :class="['title', { open }]">{{ title }}</div>
+
+      <div
+        v-show="open"
+        class="actions"
+      >
+        <slot name="actions"></slot>
+      </div>
+    </div>
+
+    <div
+      ref="content"
+      :class="['content', { open }]"
+      :style="{ height }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+
+    title: {
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      height: 0,
+      setHeightToNull: null,
+    };
+  },
+
+  watch: {
+    open(value) {
+      clearTimeout(this.setHeightToNull);
+
+      if (value) {
+        this.height = `${this.$refs.content.scrollHeight}px`;
+
+        this.setHeightToNull = setTimeout(() => {
+          this.height = null;
+        }, 200);
+      } else {
+        this.height = `${this.$refs.content.scrollHeight}px`;
+
+        setTimeout(() => {
+          this.height = 0;
+        }, 0);
+      }
+    },
+  },
+
+  mounted() {
+    if (this.open) {
+      this.height = null;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-accordion {
+  background-color: $unnnic-color-bg-base;
+  padding: $unnnic-spacing-inset-md;
+  border-radius: $unnnic-border-radius-md;
+  z-index: 0;
+  cursor: pointer;
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    border-radius: $unnnic-border-radius-md;
+    border: 1px solid $unnnic-color-border-base;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+
+    .title {
+      flex: 1;
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-regular;
+      font-size: $unnnic-font-size-body-lg;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      color: $unnnic-color-fg-emphasized;
+      margin-left: $unnnic-spacing-inline-xs;
+
+      &.open {
+        font-weight: $unnnic-font-weight-bold;
+      }
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: all 0.2s;
+    margin-top: 0;
+    opacity: 0;
+
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    color: $unnnic-color-fg-base;
+  }
+
+  .content.open {
+    margin-top: $unnnic-spacing-stack-sm;
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Alert/Alert.vue

@@ -0,0 +1,62 @@
+<template>
+  <Version1dot1
+    v-if="version === '1.1'"
+    v-bind="{ ...$props }"
+  />
+
+  <UnnnicToast
+    v-else
+    :title="text || ''"
+    :type="toastType"
+    @close="() => onClose()"
+  />
+</template>
+
+<script lang="ts">
+import Version1dot1 from './Version1dot1.vue';
+import UnnnicToast from '../Toast/Toast.vue';
+
+export default {
+  name: 'UnnnicAlert',
+  components: {
+    UnnnicToast,
+    Version1dot1,
+  },
+  props: {
+    version: {
+      type: String,
+      default: '1.1',
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    toastType() {
+      if (this.scheme === 'feedback-green' || this.type === 'success') {
+        return 'success';
+      }
+      if (this.scheme === 'feedback-red' || this.type === 'error') {
+        return 'error';
+      }
+      if (this.type === 'attention') {
+        return 'attention';
+      }
+      return 'informational';
+    },
+  },
+};
+</script>