@sybilion/uilib 1.0.20 → 1.0.22

package/assets/globals.css

@@ -0,0 +1,456 @@
+@import './fonts/fonts.css';
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-manrope);
+  --font-mono: 'KMR Apparat', monospace;
+  --tracking-tight-custom: -0.01em;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-brand: var(--brand-color);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-sb-cyan-50: var(--sb-cyan-50);
+  --color-sb-cyan-100: var(--sb-cyan-100);
+  --color-sb-cyan-200: var(--sb-cyan-200);
+  --color-sb-cyan-300: var(--sb-cyan-300);
+  --color-sb-cyan-400: var(--sb-cyan-400);
+  --color-sb-cyan-500: var(--sb-cyan-500);
+  --color-sb-cyan-600: var(--sb-cyan-600);
+  --color-sb-cyan-700: var(--sb-cyan-700);
+  --color-sb-cyan-800: var(--sb-cyan-800);
+  --color-sb-cyan-900: var(--sb-cyan-900);
+  --color-sb-purple-50: var(--sb-purple-50);
+  --color-sb-purple-100: var(--sb-purple-100);
+  --color-sb-purple-200: var(--sb-purple-200);
+  --color-sb-purple-300: var(--sb-purple-300);
+  --color-sb-purple-400: var(--sb-purple-400);
+  --color-sb-purple-500: var(--sb-purple-500);
+  --color-sb-purple-600: var(--sb-purple-600);
+  --color-sb-purple-700: var(--sb-purple-700);
+  --color-sb-purple-800: var(--sb-purple-800);
+  --color-sb-purple-900: var(--sb-purple-900);
+  --color-sb-red-50: var(--sb-red-50);
+  --color-sb-red-100: var(--sb-red-100);
+  --color-sb-red-200: var(--sb-red-200);
+  --color-sb-red-300: var(--sb-red-300);
+  --color-sb-red-400: var(--sb-red-400);
+  --color-sb-red-500: var(--sb-red-500);
+  --color-sb-red-600: var(--sb-red-600);
+  --color-sb-red-700: var(--sb-red-700);
+  --color-sb-red-800: var(--sb-red-800);
+  --color-sb-red-900: var(--sb-red-900);
+  --color-sb-green-50: var(--sb-green-50);
+  --color-sb-green-100: var(--sb-green-100);
+  --color-sb-green-200: var(--sb-green-200);
+  --color-sb-green-300: var(--sb-green-300);
+  --color-sb-green-400: var(--sb-green-400);
+  --color-sb-green-500: var(--sb-green-500);
+  --color-sb-green-600: var(--sb-green-600);
+  --color-sb-green-700: var(--sb-green-700);
+  --color-sb-green-800: var(--sb-green-800);
+  --color-sb-green-900: var(--sb-green-900);
+  --color-sb-yellow-50: var(--sb-yellow-50);
+  --color-sb-yellow-100: var(--sb-yellow-100);
+  --color-sb-yellow-200: var(--sb-yellow-200);
+  --color-sb-yellow-300: var(--sb-yellow-300);
+  --color-sb-yellow-400: var(--sb-yellow-400);
+  --color-sb-yellow-500: var(--sb-yellow-500);
+  --color-sb-yellow-600: var(--sb-yellow-600);
+  --color-sb-yellow-700: var(--sb-yellow-700);
+  --color-sb-yellow-800: var(--sb-yellow-800);
+  --color-sb-yellow-900: var(--sb-yellow-900);
+  --stroke-linecap: square;
+  --stroke-linejoin: miter;
+  --stroke-absolute: true;
+  --header-height: 3.5rem;
+}
+
+:root {
+  --sb-cyan-50: oklch(0.964 0.006 204);
+  --sb-cyan-100: oklch(0.933 0.011 204);
+  --sb-cyan-200: oklch(0.76 0.089 204);
+  --sb-cyan-300: oklch(0.7 0.098 204);
+  --sb-cyan-400: oklch(0.625 0.234 204);
+  --sb-cyan-500: oklch(0.518 0.258 204);
+  --sb-cyan-600: oklch(0.421 0.231 204);
+  --sb-cyan-700: oklch(0.388 0.042 204);
+  --sb-cyan-800: oklch(0.338 0.026 204);
+  --sb-cyan-900: oklch(0.23 0.017 204);
+  --sb-purple-50: oklch(0.964 0.021 304);
+  --sb-purple-100: oklch(0.933 0.039 303.4);
+  --sb-purple-200: oklch(0.76 0.148 301.5);
+  --sb-purple-300: oklch(0.719 0.174 300.6);
+  --sb-purple-400: oklch(0.625 0.234 297.8);
+  --sb-purple-500: oklch(0.518 0.258 292.6);
+  --sb-purple-600: oklch(0.421 0.231 289);
+  --sb-purple-700: oklch(0.33 0.179 289.7);
+  --sb-purple-800: oklch(0.238 0.123 292.3);
+  --sb-purple-900: oklch(0.23 0.049 301.1);
+  --sb-red-50: oklch(0.969 0.015 22.4);
+  --sb-red-100: oklch(0.942 0.029 23);
+  --sb-red-200: oklch(0.8 0.114 24.5);
+  --sb-red-300: oklch(0.769 0.137 25);
+  --sb-red-400: oklch(0.7 0.191 27.2);
+  --sb-red-500: oklch(0.606 0.194 28.6);
+  --sb-red-600: oklch(0.539 0.183 28.8);
+  --sb-red-700: oklch(0.427 0.155 29.5);
+  --sb-red-800: oklch(0.311 0.107 29.3);
+  --sb-red-900: oklch(0.232 0.019 24.1);
+  --sb-green-50: oklch(0.981 0.028 158.7);
+  --sb-green-100: oklch(0.949 0.08 157.2);
+  --sb-green-200: oklch(0.909 0.154 154.2);
+  --sb-green-300: oklch(0.859 0.196 151.7);
+  --sb-green-400: oklch(0.823 0.216 149.8);
+  --sb-green-500: oklch(0.748 0.208 148.6);
+  --sb-green-600: oklch(0.641 0.155 151.1);
+  --sb-green-700: oklch(0.482 0.107 152.1);
+  --sb-green-800: oklch(0.365 0.079 152.3);
+  --sb-green-900: oklch(0.254 0.023 157.2);
+  --sb-yellow-50: oklch(0.984 0.014 78.3);
+  --sb-yellow-100: oklch(0.956 0.025 78.9);
+  --sb-yellow-200: oklch(0.927 0.041 76.7);
+  --sb-yellow-300: oklch(0.844 0.1 75.5);
+  --sb-yellow-400: oklch(0.771 0.128 73.6);
+  --sb-yellow-500: oklch(0.691 0.128 71.8);
+  --sb-yellow-600: oklch(0.624 0.109 73.2);
+  --sb-yellow-700: oklch(0.481 0.083 73.3);
+  --sb-yellow-800: oklch(0.356 0.058 73.8);
+  --sb-yellow-900: oklch(0.251 0.016 79.5);
+  --sb-gray-50: oklch(0.98 0 0);
+  --sb-gray-100: oklch(0.949 0 0);
+  --sb-gray-200: oklch(0.909 0 0);
+  --sb-gray-300: oklch(0.859 0 0);
+  --sb-gray-400: oklch(0.823 0 0);
+  --sb-gray-500: oklch(0.748 0 0);
+  --sb-gray-600: oklch(0.641 0 0);
+  --sb-gray-700: oklch(0.482 0 0);
+  --sb-gray-800: oklch(0.365 0 0);
+  --sb-gray-900: oklch(0.254 0 0);
+  --sb-slate-50: oklch(0.9843 0.0011 197.14);
+  --sb-slate-100: oklch(0.9622 0.0035 219.53);
+  --sb-slate-200: oklch(0.8882 0.0101 212.52);
+  --sb-slate-300: oklch(0.8119 0.0139 214.37);
+  --sb-slate-400: oklch(0.7315 0.0168 216.72);
+  --sb-slate-500: oklch(0.6489 0.0179 211.06);
+  --sb-slate-600: oklch(0.5648 0.0184 211.07);
+  --sb-slate-700: oklch(0.4723 0.0152 208.74);
+  --sb-slate-800: oklch(0.3759 0.0107 205.8);
+  --sb-slate-900: oklch(0.2732 0.0061 214.4);
+  --sb-slate-950: oklch(0.1579 0.0017 196.99);
+  --bp-mobile: 384px;
+  --bp-tablet: 768px;
+  --bp-desktop: 1024px;
+  --p-24: 96px;
+  --p-23: 92px;
+  --p-20: 80px;
+  --p-19: 76px;
+  --p-18: 72px;
+  --p-17: 68px;
+  --p-16: 64px;
+  --p-12: 48px;
+  --p-11: 44px;
+  --p-10: 40px;
+  --p-9: 36px;
+  --p-8: 32px;
+  --p-7: 28px;
+  --p-6: 24px;
+  --p-5: 20px;
+  --p-4: 16px;
+  --p-3: 12px;
+  --p-2: 8px;
+  --p-1: 4px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --text-5xl: 48px;
+
+  --spacing-3xs: 2px;
+  --spacing-2xs: 4px;
+  --spacing-xs: 6px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+
+  --font-family-heading: 'KMR Apparat', sans-serif;
+  --font-family-body: 'Manrope', sans-serif;
+
+  /* app variables */
+  --brand-color: var(--sb-purple-400);
+  --brand-color-50: var(--sb-purple-50);
+  --brand-color-100: var(--sb-purple-100);
+  --brand-color-200: var(--sb-purple-200);
+  --brand-color-300: var(--sb-purple-300);
+  --brand-color-400: var(--sb-purple-400);
+  --brand-color-500: var(--sb-purple-500);
+  --brand-color-600: var(--sb-purple-600);
+  --brand-color-700: var(--sb-purple-700);
+  --brand-color-800: var(--sb-purple-800);
+  --brand-color-900: var(--sb-purple-900);
+  --header-height: 94px;
+  --page-x-padding: var(--p-16);
+  --page-y-padding: var(--p-12);
+  --page-color: var(--sb-slate-100);
+  --page-color-alpha-800: var(--sb-slate-100);
+  --background: oklch(1 0 0);
+  --background-alpha-800: oklch(0.99 0 0 / 0.8);
+  --background-alpha-700: oklch(0.99 0 0 / 0.7);
+  --background-alpha-500: oklch(0.99 0 0 / 0.5);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.25 0 0);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.96 0 0);
+  --secondary-800: oklch(0.96 0 0 / 0.8);
+  --secondary-foreground: oklch(0.25 0 0);
+  --muted: oklch(0.965 0 0);
+  --muted-50: oklch(0.98 0 0);
+  --muted-foreground: var(--sb-slate-600);
+  --muted-border: var(--sb-slate-400);
+  --accent: var(--sb-slate-100);
+  --accent-500: oklch(0.96 0 0 / 0.5);
+  --accent-foreground: oklch(0.25 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-100: oklch(0.577 0.245 27.325 / 0.1);
+  --destructive-200: oklch(0.577 0.245 27.325 / 0.2);
+  --destructive-400: oklch(0.577 0.245 27.325 / 0.4);
+  --destructive-600: oklch(0.577 0.245 27.325 / 0.6);
+  --destructive-900: oklch(0.577 0.245 27.325 / 0.9);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.94 0 0);
+  --input-30: oklch(0.94 0 0 / 0.3);
+  --ring: oklch(0.65 0 0);
+  --ring-50: oklch(0.65 0 0 / 0.5);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.2 0 0);
+  --sidebar-primary: oklch(0.25 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: var(--sb-slate-100);
+  --sidebar-accent-foreground: oklch(0.25 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.65 0 0);
+
+  --sb-link-color: var(--brand-color-500);
+  --sb-link-visited-color: var(--brand-color-700);
+  --sb-link-color-hover: var(--brand-color-600);
+}
+
+@media (max-width: var(--bp-mobile)) {
+  :root {
+    --header-height: 84px;
+    --page-x-padding: var(--p-6);
+    --page-y-padding: var(--p-6);
+  }
+}
+
+.dark {
+  --page-color: oklch(0.22 0 0);
+  --page-color-alpha-800: oklch(0.2242 0 0 / 0.8);
+  --background: oklch(0.14 0 0);
+  --background-alpha-800: oklch(0.14 0 0 / 0.95);
+  --background-alpha-700: oklch(0.14 0 0 / 0.7);
+  --background-alpha-500: oklch(0.14 0 0 / 0.5);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.1 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.16 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.9 0 0);
+  --primary-foreground: oklch(0.14 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-800: oklch(0.22 0 0 / 0.8);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.2 0 0);
+  --muted-50: oklch(0.2 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --muted-border: var(--sb-slate-600);
+  --accent: oklch(0.27 0 0);
+  --accent-500: oklch(0.27 0 0 / 0.5);
+  --accent-foreground: oklch(0.95 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-200: oklch(0.704 0.191 22.216 / 0.2);
+  --destructive-400: oklch(0.704 0.191 22.216 / 0.4);
+  --destructive-600: oklch(0.704 0.191 22.216 / 0.6);
+  --destructive-900: oklch(0.704 0.191 22.216 / 0.9);
+  --border: oklch(0.3 0 0 / 0.8);
+  --input: oklch(1 0 0 / 16%);
+  --input-30: oklch(1 0 0 / 0.3);
+  --ring: oklch(0.5 0 0);
+  --ring-50: oklch(0.5 0 0 / 0.5);
+  --sidebar: oklch(0.16 0 0);
+  --sidebar-foreground: oklch(0.9 0 0);
+  --sidebar-primary: oklch(0.9 0 0);
+  --sidebar-primary-foreground: oklch(0.14 0 0);
+  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.3 0 0);
+  --sidebar-ring: oklch(0.5 0 0);
+  --sb-link-color: var(--brand-color-400);
+  --sb-link-visited-color: var(--brand-color-600);
+}
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: 'Manrope', sans-serif;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  html,
+  body {
+    overscroll-behavior-y: none;
+  }
+
+  html {
+    background-color: var(--background);
+  }
+
+  body {
+    min-height: 100vh;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-family-body);
+    font-weight: 400;
+    user-select: none;
+    font-size: var(--text-sm);
+    line-height: 1.6;
+  }
+
+  #app-root {
+    max-height: 100vh;
+    overflow: hidden;
+    min-height: 100vh;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: var(--font-family-heading);
+  }
+
+  h1 {
+    font-weight: 500;
+    font-size: var(--text-3xl);
+    line-height: 1.4;
+    user-select: text;
+  }
+
+  h2 {
+    font-weight: 300;
+    font-size: var(--text-2xl);
+    line-height: 1.4;
+  }
+
+  h3 {
+    font-weight: 500;
+    font-size: var(--text-xl);
+    line-height: 1.4;
+  }
+
+  label {
+    @apply cursor-pointer;
+    font-weight: 500;
+  }
+
+  .font-sans {
+    @apply tracking-tight-custom;
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  button {
+    font-weight: 500;
+  }
+
+  input:focus,
+  textarea:focus {
+    box-shadow: inset 0 0 0 2px var(--brand-color-400);
+    /* border: none !important; */
+  }
+
+  a {
+    color: var(--sb-link-color);
+    cursor: pointer;
+  }
+
+  a:visited {
+    color: var(--sb-link-visited-color);
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  ::selection {
+    background-color: var(--brand-color-200);
+  }
+  .dark ::selection {
+    background-color: var(--brand-color-800);
+  }
+}

package/assets/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="<%= htmlWebpackPlugin.options.lang %>">
+  <head>
+    <base href="<%= htmlWebpackPlugin.options.baseUrl %>" />
+    <title>UILIB</title>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="assets/globals.css" />
+  </head>
+  <body>
+    <div id="app-root"></div>
+    <div id="app-modal"></div>
+  </body>
+</html>

package/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+</svg>