@kruzer/styles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/dist/kruzer-tailwind-preset.cjs

@@ -1,6 +1,33 @@
 module.exports = {
-	theme: {
+  theme: {
     extend: {
+      keyframes: {
+        slideDownAndFade: {
+          from: { opacity: "0", transform: "translateY(-2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideLeftAndFade: {
+          from: { opacity: "0", transform: "translateX(2px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        slideUpAndFade: {
+          from: { opacity: "0", transform: "translateY(2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideRightAndFade: {
+          from: { opacity: "0", transform: "translateX(-2px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        slideDownAndFade:
+          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade:
+          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade:
+          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+      },
       gridTemplateColumns: {
         xs: "repeat(auto-fill,minmax(12.5rem,1fr))",
         sm: "repeat(auto-fill,minmax(22rem,1fr))",
@@ -11,12 +38,15 @@ module.exports = {
         "span-full": "1 / -1",
       },
       screens: {
-        '2md': '930px',
+        "2md": "930px",
       },
       lineHeight: {
-        120: '120%',
-        140: '140%',
-      }
+        120: "120%",
+        140: "140%",
+      },
+      aria: {
+        invalid: 'invalid="true"',
+      },
     },
     colors: {
       neutral: {
@@ -74,13 +104,212 @@ module.exports = {
         70: "rgb(var(--brand-70) / <alpha-value>)",
         80: "rgb(var(--brand-80) / <alpha-value>)",
       },
-      "post": "rgb(var(--post) / <alpha-value>)",
-      "delete": "rgb(var(--delete) / <alpha-value>)",
-      "put": "rgb(var(--put) / <alpha-value>)",
-      "patch": "rgb(var(--patch) / <alpha-value>)",
-      "get": "rgb(var(--get) / <alpha-value>)",
-      body: 'rgb(var(--body-background) / <alpha-value>)',
+      post: "rgb(var(--post) / <alpha-value>)",
+      delete: "rgb(var(--delete) / <alpha-value>)",
+      put: "rgb(var(--put) / <alpha-value>)",
+      patch: "rgb(var(--patch) / <alpha-value>)",
+      get: "rgb(var(--get) / <alpha-value>)",
+      body: "rgb(var(--body-background) / <alpha-value>)",
       transparent: "transparent",
+      customer: {
+        primary: {
+          100: "var(--color-customer-primary-100)",
+          200: "var(--color-customer-primary-200)",
+          300: "var(--color-customer-primary-300)",
+          400: "var(--color-customer-primary-400)",
+          500: "var(--color-customer-primary-500)",
+          600: "var(--color-customer-primary-600)",
+          700: "var(--color-customer-primary-700)",
+          800: "var(--color-customer-primary-800)",
+          900: "var(--color-customer-primary-900)",
+        },
+        secondary: {
+          100: "var(--color-customer-secondary-100)",
+          200: "var(--color-customer-secondary-200)",
+          300: "var(--color-customer-secondary-300)",
+          400: "var(--color-customer-secondary-400)",
+          500: "var(--color-customer-secondary-500)",
+          600: "var(--color-customer-secondary-600)",
+          700: "var(--color-customer-secondary-700)",
+          800: "var(--color-customer-secondary-800)",
+          900: "var(--color-customer-secondary-900)",
+        },
+        tertiary: {
+          100: "var(--color-customer-tertiary-100)",
+          200: "var(--color-customer-tertiary-200)",
+          300: "var(--color-customer-tertiary-300)",
+          400: "var(--color-customer-tertiary-400)",
+          500: "var(--color-customer-tertiary-500)",
+          600: "var(--color-customer-tertiary-600)",
+          700: "var(--color-customer-tertiary-700)",
+          800: "var(--color-customer-tertiary-800)",
+          900: "var(--color-customer-tertiary-900)",
+        },
+      },
+      brand: {
+        primary: {
+          100: "#EAEEFA",
+          200: "#D6DCF5",
+          300: "#8397E2",
+          400: "#4C79FA",
+          500: "#3151CE",
+          600: "#2746AD",
+          700: "#1D317C",
+          800: "#142052",
+          900: "#0A1029",
+        },
+        navy: {
+          100: "#C9D1FF",
+          200: "#9AA5E2",
+          300: "#48507D",
+          400: "#2A2E45",
+          500: "#232534",
+          600: "#1C1E2A",
+          700: "#191C2A",
+          800: "#0E0F15",
+          900: "#07070A",
+        },
+        paper: {
+          100: "#FEFDFB",
+          200: "#FEFCF9",
+          300: "#FDFBF6",
+          400: "#FDF9F3",
+          500: "#FCF8F0",
+          600: "#F7ECD6",
+          700: "#F2E0BD",
+          800: "#EDD4A3",
+          900: "#EBCE96",
+        },
+        green: {
+          100: "#E4F7E4",
+          200: "#C9EEC8",
+          300: "#AFE6AD",
+          400: "#8FFF85",
+          500: "#79D576",
+          600: "#62AC5D",
+          700: "#4C8B4A",
+          800: "#366534",
+          900: "#1F401E",
+        },
+      },
+      product: {
+        oms: {
+          100: "#F8DFD6",
+          200: "#F1BFAD",
+          300: "#EA9E85",
+          400: "#DF8738",
+          500: "#DC5E33",
+          600: "#CF4A11",
+          700: "#84381F",
+          800: "#582614",
+          900: "#2C130A",
+        },
+        pim: {
+          100: "#E8F1EF",
+          200: "#D2E5E3",
+          300: "#C2D7D5",
+          400: "#A3BCB9",
+          500: "#345B57",
+          600: "#27443F",
+          700: "#1F3734",
+          800: "#152423",
+          900: "#0A1211",
+        },
+        appstore: {
+          100: "#E9F7FF",
+          200: "#D5EFFE",
+          300: "#AADEFD",
+          400: "#A6E6FD",
+          500: "#72C8FC",
+          600: "#65B0D8",
+          700: "#4589B3",
+          800: "#184A6A",
+          900: "#012B45",
+        },
+        devtools: {
+          100: "#F7C9E8",
+          200: "#E0A5CD",
+          300: "#B35C96",
+          400: "#9F127A",
+          500: "#861360",
+          600: "#640D4D",
+          700: "#500B3A",
+          800: "#360826",
+          900: "#1B0413",
+        },
+        black: {
+          100: "#E5E7EB",
+          200: "#D1D5DB",
+          300: "#9CA3AF",
+          400: "#6B7280",
+          500: "#374151",
+          600: "#1F2937",
+          700: "#111827",
+          800: "#0B0F19",
+          900: "#05070D",
+        },
+        neutral: {
+          100: "#F4F4F8",
+          200: "#EEEFF4",
+          300: "#E3E3ED",
+          400: "#D9DAE5",
+          500: "#C6C9D9",
+          600: "#A9ADC0",
+          700: "#989DAD",
+          800: "#777D8A",
+          900: "#3D4150",
+        },
+      },
+      system: {
+        neutral: {
+          100: "#F4F4F8",
+          200: "#EEEFF4",
+          300: "#E3E3ED",
+          400: "#D9DAE5",
+          500: "#C6C9D9",
+          600: "#A9ADC0",
+          700: "#989DAD",
+          800: "#777D8A",
+          900: "#3D4150",
+        },
+        success: {
+          100: "#D1FADF",
+          200: "#A6F4C5",
+          300: "#6CE9A6",
+          400: "#32D583",
+          500: "#12B76A",
+          600: "#039855",
+          700: "#027A48",
+          800: "#05603A",
+          900: "#054F31",
+        },
+        error: {
+          100: "#FEE4E2",
+          200: "#FECDCA",
+          300: "#FECDCA",
+          400: "#F97066",
+          500: "#F04438",
+          600: "#D92D20",
+          700: "#B42318",
+          800: "#912018",
+          900: "#7A271A",
+        },
+        warning: {
+          100: "#FEF0C7",
+          200: "#FEDF89",
+          300: "#FEC84B",
+          400: "#FDB022",
+          500: "#F79009",
+          600: "#DC6803",
+          700: "#B54708",
+          800: "#93370D",
+          900: "#7A2E0E",
+        },
+        global: {
+          100: "#FFFFFF",
+          900: "#1A1A1A",
+        },
+      },
     },
     spacing: {
       0: "0",
@@ -118,13 +347,15 @@ module.exports = {
       base: "1rem",
       md: "1.077rem",
       "2md": "1.231rem",
-      "xl": "1.538rem",
+      xl: "1.538rem",
       "2xl": "2rem",
       "3xl": "2.462rem",
     },
     fontFamily: {
-      'sans': ['Fira Sans', 'sans-serif'],
-      'mono': ['Fira Mono', 'monospace'],
+      sans: ["Fira Sans", "sans-serif"],
+      mono: ["Fira Mono", "monospace"],
+      dmsans: ["DMSans", "sans-serif"],
+      inter: ["Inter", "sans-serif"],
     },
     fontWeight: {
       regular: 400,
@@ -133,34 +364,10 @@ module.exports = {
       bold: 700,
     },
     boxShadow: {
-      sm: '0px 3px 10px 0px rgba(0, 0, 0, 0.05)',
-      DEFAULT: '0px 2px 10px 0px rgba(0, 0, 0, 0.1)',
-      md: '0 0px 20px -1px rgb(0 0 0 / 0.1)',
-      bordered: '0 0px 0px 3px rgb(0 0 0 / 0.1)',
-    },
-    keyframes: {
-      slideDownAndFade: {
-        from: { opacity: '0', transform: 'translateY(-2px)' },
-        to: { opacity: '1', transform: 'translateY(0)' },
-      },
-      slideLeftAndFade: {
-        from: { opacity: '0', transform: 'translateX(2px)' },
-        to: { opacity: '1', transform: 'translateX(0)' },
-      },
-      slideUpAndFade: {
-        from: { opacity: '0', transform: 'translateY(2px)' },
-        to: { opacity: '1', transform: 'translateY(0)' },
-      },
-      slideRightAndFade: {
-        from: { opacity: '0', transform: 'translateX(-2px)' },
-        to: { opacity: '1', transform: 'translateX(0)' },
-      },
-    },
-    animation: {
-      slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      sm: "0px 3px 10px 0px rgba(0, 0, 0, 0.05)",
+      DEFAULT: "0px 2px 10px 0px rgba(0, 0, 0, 0.1)",
+      md: "0 0px 20px -1px rgb(0 0 0 / 0.1)",
+      bordered: "0 0px 0px 3px rgb(0 0 0 / 0.1)",
     },
   },
-}
+};

package/dist/styles.js

@@ -0,0 +1 @@
+

package/dist/styles.min.scss

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Fira+Sans:wght@400;500;600;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;*{margin:0;padding:0;box-sizing:border-box}body{position:relative}@media(max-width: 640px){html{font-size:16px}}@media(min-width: 640px){html{font-size:13px}}@layer base{:root{--neutral-0: 255 255 255;--neutral-25: 250 250 250;--neutral-50: 243 243 243;--neutral-100: 230 230 230;--neutral-150: 217 217 217;--neutral-200: 204 204 204;--neutral-250: 191 191 191;--neutral-300: 179 179 179;--neutral-350: 165 165 165;--neutral-400: 153 153 153;--neutral-450: 140 140 140;--neutral-500: 128 128 128;--neutral-550: 115 115 115;--neutral-600: 102 102 102;--neutral-650: 90 90 90;--neutral-700: 76 76 76;--neutral-750: 64 64 64;--neutral-800: 51 51 51;--neutral-850: 38 38 38;--neutral-900: 21 24 30;--primary-0: 246 248 254;--primary-50: 232 239 253;--primary-100: 206 227 253;--primary-500: 9 112 246;--primary-600: 7 90 197;--primary-900: 2 22 49;--success-100: 240 254 230;--success-500: 116 217 38;--success-600: 93 173 31;--danger-100: 254 232 230;--danger-500: 246 24 9;--danger-600: 197 19 7;--warning-100: 254 244 230;--warning-500: 246 143 9;--warning-600: 197 114 7;--brand-10: 155 212 255;--brand-20: 55 170 255;--brand-30: 89 131 247;--brand-40: 87 153 247;--brand-50: 27 123 247;--brand-60: 27 105 253;--brand-70: 11 94 215;--brand-80: 8 43 94;--post: var(--success-600);--delete: var(--danger-500);--put: var(--warning-500);--patch: 180 45 255;--get: var(--primary-500);--body-background: var(--neutral-50)}}body{font-family:"Fira Sans",sans-serif;font-weight:400;font-style:normal}h1{@apply text-3xl;line-height:140%}h2{@apply text-2xl;line-height:140%}h3{@apply text-xl;line-height:140%}h4{@apply text-2md;line-height:140%}h4{@apply text-md;line-height:140%}a,p,span{@apply text-base;line-height:140%}small{@apply text-sm;line-height:120%}p{white-space:normal;line-height:140%}
+@import"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Fira+Sans:wght@400;500;600;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;*{margin:0;padding:0;box-sizing:border-box}body{position:relative}@media(max-width: 640px){html{font-size:16px}}@media(min-width: 640px){html{font-size:13px}}@layer base{:root{--neutral-0: 255 255 255;--neutral-25: 250 250 250;--neutral-50: 243 243 243;--neutral-100: 230 230 230;--neutral-150: 217 217 217;--neutral-200: 204 204 204;--neutral-250: 191 191 191;--neutral-300: 179 179 179;--neutral-350: 165 165 165;--neutral-400: 153 153 153;--neutral-450: 140 140 140;--neutral-500: 128 128 128;--neutral-550: 115 115 115;--neutral-600: 102 102 102;--neutral-650: 90 90 90;--neutral-700: 76 76 76;--neutral-750: 64 64 64;--neutral-800: 51 51 51;--neutral-850: 38 38 38;--neutral-900: 21 24 30;--primary-0: 246 248 254;--primary-50: 232 239 253;--primary-100: 206 227 253;--primary-500: 9 112 246;--primary-600: 7 90 197;--primary-900: 2 22 49;--success-100: 240 254 230;--success-500: 116 217 38;--success-600: 93 173 31;--danger-100: 254 232 230;--danger-500: 246 24 9;--danger-600: 197 19 7;--warning-100: 254 244 230;--warning-500: 246 143 9;--warning-600: 197 114 7;--brand-10: 155 212 255;--brand-20: 55 170 255;--brand-30: 89 131 247;--brand-40: 87 153 247;--brand-50: 27 123 247;--brand-60: 27 105 253;--brand-70: 11 94 215;--brand-80: 8 43 94;--post: var(--success-600);--delete: var(--danger-500);--put: var(--warning-500);--patch: 180 45 255;--get: var(--primary-500);--body-background: var(--neutral-50);--color-customer-primary-100: #f0f9ff;--color-customer-primary-200: #e0f2fe;--color-customer-primary-300: #bae6fd;--color-customer-primary-400: #7dd3fc;--color-customer-primary-500: #38bdf8;--color-customer-primary-600: #0ea5e9;--color-customer-primary-700: #0284c7;--color-customer-primary-800: #0369a1;--color-customer-primary-900: #0c4a6e;--color-customer-secondary-100: #f5f5f5;--color-customer-secondary-200: #e5e5e5;--color-customer-secondary-300: #d4d4d4;--color-customer-secondary-400: #a3a3a3;--color-customer-secondary-500: #737373;--color-customer-secondary-600: #525252;--color-customer-secondary-700: #404040;--color-customer-secondary-800: #262626;--color-customer-secondary-900: #0a0a0a;--color-customer-tertiary-100: #f9fafb;--color-customer-tertiary-200: #f3f4f6;--color-customer-tertiary-300: #e5e7eb;--color-customer-tertiary-400: #d1d5db;--color-customer-tertiary-500: #9ca3af;--color-customer-tertiary-600: #6b7280;--color-customer-tertiary-700: #4b5563;--color-customer-tertiary-800: #374151;--color-customer-tertiary-900: #1f2937}}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url("./assets/fonts/DMSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}body{font-family:"Fira Sans",sans-serif;font-weight:400;font-style:normal;@apply text-neutral-700}h1{@apply text-3xl;line-height:140%}h2{@apply text-2xl;line-height:140%}h3{@apply text-xl;line-height:140%}h4{@apply text-2md;line-height:140%}h4{@apply text-md;line-height:140%}a,p,span{@apply text-base;line-height:140%}small{@apply text-sm;line-height:120%}p{white-space:normal;line-height:140%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{@apply bg-neutral-600 rounded}.krz-grid-xs{@apply grid grid-cols-xs gap-4}.krz-grid-sm{@apply grid grid-cols-sm gap-4}.krz-grid-md{@apply grid grid-cols-md gap-4}.krz-grid-lg{@apply grid grid-cols-lg gap-4}

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@kruzer/styles",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.31",
   "type": "module",
+  "main": "./dist/styles.js",
+  "module": "./dist/styles.js",
   "files": [
     "dist/styles.min.scss",
-    "dist/kruzer-tailwind-preset.cjs"
+    "dist/kruzer-tailwind-preset.cjs",
+    "dist/styles.js",
+    "dist/assets"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "sass src/styles/main.scss src/styles/styles.min.scss --no-source-map --style compressed && tsc && vite build",
-    "preview": "vite preview"
+    "build": "sass src/styles/main.scss dist/styles.min.scss --no-source-map --style compressed && tsc && vite build",
+    "preview": "vite preview",
+    "publish": "npm publish --tag alpha"
   },
   "keywords": [
     "scss",
@@ -28,4 +33,4 @@
     "vite": "^4.2.0",
     "vite-plugin-static-copy": "^0.13.1"
   }
-}
+}