sc-v3

Link Preview Demo

Project Setup

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Copy value in file tailwind.config.js

// eslint-disable-next-line no-undef
const colors = require("tailwindcss/colors");

// eslint-disable-next-line no-undef
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/sc-v3/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    container: {
      center: true,
    },
    animation: {
      none: "none",
      spin: "spin 1s linear infinite",
      ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
      pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
      bounce: "bounce 1s infinite",
    },
    aspectRatio: {
      auto: "auto",
      square: "1 / 1",
      video: "16 / 9",
      picture: "3 / 4",
    },
    borderRadius: {
      none: "0px",
      sm: "0.125rem",
      DEFAULT: "0.25rem",
      md: "0.375rem",
      lg: "0.5rem",
      xl: "0.75rem",
      "2xl": "1rem",
      "3xl": "1.5rem",
      full: "9999px",
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      blue: colors.blue,
      amber: colors.amber,
      red: colors.red,
    },
    extend: {
      colors: {
        hyperlink: "#4300F9",
        "primary-50": "#E9EBF8",
        "primary-75": "#B3B1ED",
        "primary-100": "#9491E5",
        "primary-200": "#6561DA",
        "primary-300": "#4641D2",
        "primary-400": "#312E93",
        "primary-500": "#2B2880",
        primary: "#1A73E8",
        "information-50": "#E9EBF8",
        "information-75": "#C1C6FD",
        "information-100": "#A7AEFC",
        "information-200": "#828CFA",
        "information-300": "#6874F9",
        "information-400": "#4951AE",
        "information-500": "#3F4798",
        information: "#4641D2",
        "success-50": "#ECF6EC",
        "success-75": "#B0D9AF",
        "success-100": "#8FCA8E",
        "success-200": "#5FB35E",
        "success-300": "#3EA33D",
        "success-400": "#2B722B",
        "success-500": "#266325",
        success: "#129961",
        "low-warning-50": "#FEFAEB",
        "low-warning-75": "#FAE9AE",
        "low-warning-100": "#F7E08D",
        "low-warning-200": "#F4D25B",
        "low-warning-300": "#F2C93A",
        "low-warning-400": "#A98D29",
        "low-warning-500": "#947B23",
        "low-warning": "#F2C93A",
        "high-warning-50": "#FDF2EC",
        "high-warning-75": "#F8C9B1",
        "high-warning-100": "#F5B390",
        "high-warning-200": "#F09260",
        "high-warning-300": "#ED7C40",
        "high-warning-400": "#A6572D",
        "high-warning-500": "#914C27",
        "high-warning": "#ED7C40",
        "danger-50": "#FBEBEB",
        "danger-75": "#EFAEAE",
        "danger-100": "#E88C8C",
        "danger-200": "#DE5B5B",
        "danger-300": "#D73939",
        "danger-400": "#972828",
        "danger-500": "#832323",
        danger: "#CF202F",
        "neutral-0": "#FFFFFF",
        "neutral-10": "#FAFAFA",
        "neutral-20": "#F6F6F6",
        "neutral-30": "#ECECEC",
        "neutral-40": "#E0E0E0",
        "neutral-50": "#C4C4C4",
        "neutral-60": "#B6B6B6",
        "neutral-70": "#AAAAAA",
        "neutral-80": "#9C9C9C",
        "neutral-90": "#8E8E8E",
        "neutral-100": "#808080",
        "neutral-200": "#717171",
        "neutral-300": "#636363",
        "neutral-400": "#030303",
        "neutral-500": "#494949",
        "neutral-600": "#3D3D3D",
        "neutral-700": "#2D2D2D",
        "neutral-800": "#1F1F1F",
        "neutral-900": "#131313",
        neutral: "#636363",
        secondary: "#828C97",
        error: "#F87171",
        warning: "#DD7D00",
        "accent-hover": "#69A3F1",
        "accent-focus": "#0958C0",
        "accent-disable": "#D5D9DC",
        "accent-secondary": "#EDF3FB",
        "semantic-link": "#0151FC",
        "semantic-secondary": "#828C97",
        "background-success": "#E4F9E2",
        "background-warning": "#FFF3E2",
        "background-error": "#FBEDEE",
        "background-link": "#EDF3FB",
        "background-disable": "#EEEEEE",
        "background-disable-hover": "#F0F3F6",
        "background-disable-lower": "#F6F8FC",
        "neutral-secondary": "#515961",
        "neutral-primary": "#0C0D0E",
        "neutral-disable": "#A0A0A7",
        "neutral-placeholder": "#C1C6CE",
        "border-base": "#DBDBDB",
        "border-secondary": "#BEBEBE",
        "icon-primary": "#0151FC",
        "icon-secondary": "#515961",
        "icon-active": "#0C0D0E",
        "icon-default": "#828C97",
        "icon-primary-hover": "#828C97",
        "icon-disable": "#A0A0A7",
      },
    },
  },
  plugins: [],
};

Use

import { createApp } from "vue";
import App from "./App.vue";

import 'sc-v3/dist/style.css';
import * as components from "sc-v3";
or
import {SButton} from "sc-v3";

const app = createApp(App);

for (const componentKey in components) {
  app.component(componentKey, components[componentKey]);
}

app.mount("#app");

Config Type TS

Create file sc-v3.d.ts

declare module "sc-v3";