@likable-hair/svelte 0.0.7 → 0.0.8

package/buttons/Button.svelte

@@ -12,7 +12,6 @@ $: cssVariables = Object.entries({
     .reduce((css, [key, value]) => {
     return `${css}${key}: ${value};`;
 }, '');
-import '$lib/common/tailwind.css';
 import Icon from '../media/Icon.svelte';
 </script>
 

package/buttons/Button.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         type?: 'default' | 'text' | 'icon';

package/common/Card.svelte

@@ -1,5 +1,4 @@
-<script >import { Elevation } from '../enums/elevation.enum';
-export let rounded = true, outlined = false, elevation = Elevation.md;
+<script >export let rounded = true, outlined = false;
 $: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
     .reduce((css, [key, value]) => {
     return `${css}${key}: ${value};`;
@@ -23,13 +22,8 @@ import '$lib/common/tailwind.css';
 </style>
 
 <div 
-  class="card-container flex flex-col rounded-md shadow-lg" 
+  class="card-container flex flex-col shadow-lg" 
   style={cssVariables}
-  class:shadow-sm={!outlined && elevation == Elevation.sm}
-  class:shadow-md={!outlined && elevation == Elevation.md}
-  class:shadow-lg={!outlined && elevation == Elevation.lg}
-  class:shadow-xl={!outlined && elevation == Elevation.xl}
-  class:shadow-2xl={!outlined && elevation == Elevation.xxl}
   class:border-solid={outlined}
   class:rounded-md={rounded}
 >

package/common/Card.svelte.d.ts

@@ -1,11 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import { Elevation } from '../enums/elevation.enum';
 import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         rounded?: boolean;
         outlined?: boolean;
-        elevation?: Elevation;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/common/tailwind.css

@@ -1,3 +1,149 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+html {
+  --shadow-color: #000;
+  --ring-inset: inset;
+  --ring-offset-width: 0px;
+  --ring-color: rgb(255 255 255/0.1);
+  --ring-offset-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+  --ring-shadow: 0 0 #0000;
+  --shadow: 0 0 #0000;
+}
+
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.text-2xl {
+  font-size: 1.5rem/* 24px */;
+  line-height: 2rem/* 32px */;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.rounded-md {
+  border-radius: 0.375rem
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.-top-12 {
+  top: -3rem/* -48px */;
+}
+
+.-top-14 {
+  top: -3.5rem/* -56px */;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.bottom-3 {
+  bottom: 0.75rem/* 12px */;
+}
+
+.bottom-2 {
+  bottom: 0.5rem/* 8px */;
+}
+
+.mt-1 {
+  margin-top: 0.25rem/* 4px */;
+}
+
+.mt-6 {
+  margin-top: 1.5rem/* 24px */;
+}
+
+.ml-2 {
+  margin-left: 0.5rem/* 8px */;
+}
+
+.mr-2 {
+  margin-right: 0.5rem/* 8px */;
+}
+
+.mr-5 {
+  margin-right: 1.25rem/* 20px */;
+}
+
+.mx-2 {
+  margin-left: 0.5rem/* 8px */;
+  margin-right: 0.5rem/* 8px */;
+}
+
+.mx-3 {
+  margin-left: 0.75rem/* 12px */;
+  margin-right: 0.75rem/* 12px */;
+}
+
+.p-2 {
+  padding: 0.5rem/* 8px */;
+}
+
+.h-12 {
+  height: 3rem/* 48px */;
+}
+
+.h-14 {
+  height: 3.5rem/* 56px */;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.shadow-lg {
+  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-colored: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
+}
+
+.shadow-md {
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-colored: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
+}

package/forms/Textfield.svelte

@@ -28,7 +28,6 @@ import '$lib/common/tailwind.css';
 
 <style>
   .input-container {
-    margin-top: 15px;
     height: 50px;
     position: relative;
     width: var(--width, 100%);
@@ -130,7 +129,7 @@ import '$lib/common/tailwind.css';
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div class="flex content-center relative bottom-3 ml-2 mr-2">
+        <div class="flex content-center relative bottom-2 ml-2 mr-2">
           <div>
             <slot name="prepend-inner"></slot>
           </div>

package/navigation/HeaderMenu.svelte

@@ -24,14 +24,14 @@ import Navigator from './Navigator.svelte';
 
 <nav
   class="
-    shadow-md sticky h-12 -top-12 transition-all
+    shadow-md sticky h-14 -top-14 transition-all
     flex flex-wrap items-center
     header-menu-container
   "
   class:top-0={visible}
 >
   {#if $$slots.prepend}
-    <div class="h-12 flex-none">
+    <div class="h-14 flex-none">
       <slot name="prepend"></slot>
     </div>
   {/if}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -20,8 +20,7 @@
   "type": "module",
   "dependencies": {
     "@mdi/font": "^6.5.95",
-    "uuid": "^8.3.2",
-    "tailwindcss": "^3.0.13"
+    "uuid": "^8.3.2"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -32,8 +31,6 @@
     "./common/tailwind.css": "./common/tailwind.css",
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/utils": "./dates/utils.js",
-    "./enums/elevation.enum": "./enums/elevation.enum.js",
-    "./enums": "./enums/index.js",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",

package/enums/elevation.enum.d.ts

@@ -1,7 +0,0 @@
-export declare enum Elevation {
-    sm = "sm",
-    md = "md",
-    lg = "lg",
-    xl = "xl",
-    xxl = "xxl"
-}

package/enums/elevation.enum.js

@@ -1,8 +0,0 @@
-export var Elevation;
-(function (Elevation) {
-    Elevation["sm"] = "sm";
-    Elevation["md"] = "md";
-    Elevation["lg"] = "lg";
-    Elevation["xl"] = "xl";
-    Elevation["xxl"] = "xxl";
-})(Elevation || (Elevation = {}));

package/enums/index.d.ts

@@ -1 +0,0 @@
-export { Elevation } from './elevation.enum';

package/enums/index.js

@@ -1 +0,0 @@
-export { Elevation } from './elevation.enum';