@wwtdev/bsds-css 0.0.3

package/dist/wwt-bsds-preset.js

@@ -0,0 +1,185 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  darkMode: "class",
+  theme: {
+    backgroundColor: ({ theme }) => theme("colors"),
+    colors: {
+      transparent: "transparent",
+      white: "#FFFFFF",
+      black: "#0A0B19",
+      blue: {
+        10: "rgba(0, 134, 234, 0.1)",
+        100: "#99CFF7",
+        200: "#66B6F2",
+        300: "#339EEE",
+        400: "#0086EA",
+        500: "#006DC7"
+      },
+      red: {
+        10: "rgba(238, 40, 42, 0.1)",
+        100: "#F8A9AA",
+        200: "#F57E7F",
+        300: "#F15355",
+        400: "#EE282A",
+        500: "#D91214"
+      },
+      plum: {
+        10: "rgba(28, 0, 135, 0.1)",
+        100: "#A499CF",
+        200: "#7766B7",
+        300: "#49339F",
+        400: "#1C0087"
+      },
+      royal: {
+        100: "#C5CCEB",
+        200: "#7585D1",
+        300: "#5365C4",
+        400: "#162FB4"
+      },
+      violet: {
+        100: "#CBC0DA",
+        200: "#9983B6",
+        300: "#634291",
+        400: "#330072"
+      },
+      navy: {
+        100: "#C6C6D1",
+        200: "#8D8EA1",
+        300: "#555775",
+        400: "#1D1E48",
+        500: "#131431"
+      },
+      orange: {
+        10: "rgba(250, 70, 22, 0.1)",
+        100: "#FED1C5",
+        200: "#FDA58D",
+        300: "#FC7755",
+        400: "#FA4616",
+        warning: "#EA6712"
+      },
+      pink: {
+        100: "#F6CBE0",
+        200: "#EB7EAF",
+        300: "#E45E9B",
+        400: "#E31C79",
+        500: "#D11A6F"
+      },
+      purple: {
+        10: "rgba(130, 18, 196, 0.09)",
+        100: "#E0C5EF",
+        200: "#BF8ADF",
+        300: "#A154D0",
+        400: "#8212C4"
+      },
+      gray: {
+        100: "#F0F0FA",
+        200: "#C9CAD9",
+        300: "#A3A4B7",
+        400: "#4E4F5F",
+        500: "#292940"
+      },
+      "gradient-dark":
+        "linear-gradient(90deg, #1C0087 0%, #EE282A 35%, #FFFFFF 50%, #0086EA 65%, #1C0087 100%)",
+      "gradient-light":
+        "linear-gradient(90deg, #1C0087 0%, #EE282A 35%, #FFFFFF 50%, #0086EA 65%, #1C0087 100%)",
+      "gradient-line":
+        "linear-gradient(90deg, #EE282A 0%, #1C0087 50%, #0086EA 100%)"
+    },
+    fontFamily: {
+      sans: [
+        "Roobert",
+        "system-ui",
+        "BlinkMacSystemFont",
+        "-apple-system",
+        "Segoe UI",
+        "Roboto",
+        "Oxygen",
+        "Ubuntu",
+        "Cantarell",
+        '"Fira Sans"',
+        '"Droid Sans"',
+        '"Helvetica Neue"',
+        "sans-serif"
+      ]
+    },
+    fontSize: {
+      xs: ".75rem", // 12px
+      sm: ".875rem", // 14px
+      base: "1rem", // 16px
+      md: "1.125rem", // 18px
+      lg: "1.25rem", // 20px
+      xl: "1.5rem", // 24px
+      "2xl": "2rem", // 32px
+      "3xl": "2.25rem", // 36px
+      "4xl": "3rem", // 48px
+      // @link https://utopia.fyi/type/calculator/?c=400,16,1.125,1200,16,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl
+      // We're using utopia as a staring point but adjusting to our scale with the same math functions
+      "f-xs": "clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem)",
+      "f-sm": "clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem)",
+      "f-base": "clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem)",
+      "f-md": "clamp(1.00rem, calc(0.94rem + 0.25vw), 1.125rem)",
+      "f-lg": "clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem)",
+      "f-xl": "clamp(1.25rem, calc(1.13rem + 0.50vw), 1.50rem)",
+      "f-2xl": "clamp(1.50rem, calc(1.25rem + 1.00vw), 2.00rem)",
+      "f-3xl": "clamp(2.00rem, calc(1.88rem + 0.50vw), 2.25rem)",
+      "f-4xl": "clamp(2.25rem, calc(1.88rem + 1.50vw), 3.00rem)"
+    },
+    extend: {
+      borderRadius: {
+        md: ".25rem"
+      },
+      borderWidth: {
+        1: "1px",
+        6: "6px"
+      },
+      boxShadow: {
+        DEFAULT:
+        "-4px 4px 12px rgba(0,0,0,0.06), -8px 8px 16px rgba(28,0,135,0.2)",
+        contentLow:
+          "-4px 4px 12px rgba(0,0,0,0.06), -8px 8px 16px rgba(28,0,135,0.2)",
+        contentLowCenter:
+          "0px 0px 12px rgba(0,0,0,0.06), 0px 0px 16px rgba(28,0,135,0.2)",
+        contentMedium:
+          "-8px 8px 24px rgba(0,0,0,0.06), -16px 16px 32px rgba(28,0,135,0.2)",
+        contentHigh:
+          "0px 16px 48px rgba(0,0,0,0.06), 0px 32px 64px rgba(28,0,135,0.2)",
+        drawerLeft:
+          "-12px 12px 24px rgba(0,0,0,0.06), -16px 16px 32px rgba(28,0,135,0.2)",
+        drawerRight:
+          "-12px 12px 24px rgba(0,0,0,0.06), 16px 16px 32px rgba(28,0,135,0.2)",
+        profilePhoto: "inset 0px 0px 0.5em rgba(28,0,135,0.25)"
+      },
+      lineHeight: {
+        sm: "115%",
+        base: "150%"
+      },
+      spacing: {
+        // referenced so we can generate css properties in tokens.css
+        ...defaultTheme.spacing,
+        // @link https://utopia.fyi/space/calculator?c=400,16,1.125,1200,16,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-xl|xl-3xl
+        // for fluid sizing we are only using the one up pairs and custom pairs - base sizing is static
+        "f-1": "clamp(0.25rem, calc(0.13rem + 0.50vw), 0.50rem)",
+        "f-2": "clamp(0.50rem, calc(0.38rem + 0.50vw), 0.75rem)",
+        "f-3": "clamp(0.75rem, calc(0.63rem + 0.50vw), 1.00rem)",
+        "f-4": "clamp(1.00rem, calc(0.75rem + 1.00vw), 1.50rem)",
+        "f-6": "clamp(1.50rem, calc(1.25rem + 1.00vw), 2.00rem)",
+        "f-8": "clamp(2.00rem, calc(1.50rem + 2.00vw), 3.00rem)",
+        "f-12": "clamp(4.00rem, calc(3.00rem + 4.00vw), 6.00rem)",
+        "f-16": "clamp(4.00rem, calc(3.00rem + 4.00vw), 6.00rem)",
+        "f-24": "clamp(6.00rem, calc(5.00rem + 4.00vw), 8.00rem)",
+        "f-4to8": "clamp(1.00rem, calc(0.50rem + 2.00vw), 2.00rem)", // small to large
+        "f-6to12": "clamp(1.50rem, calc(0.75rem + 3.00vw), 3.00rem)", // medium to XL
+        "f-12to24": "clamp(3.00rem, calc(1.50rem + 6.00vw), 6.00rem)" // XL to 3XL
+      },
+      maxWidth: {
+        content: "72rem"
+      },
+      zIndex: {
+        "-1": "-1",
+        "100": "100"
+      },
+    }
+  },
+  plugins: []
+};