@joyautomation/salt 0.0.1

package/dist/styles/form.scss

@@ -0,0 +1,40 @@
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=number],
+input[type=tel],
+input[type=datetime-local],
+textarea,
+select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  font-size: 16px;
+  box-sizing: border-box;
+  font-family: 'Space Grotesk', sans-serif;
+
+  &:focus {
+    outline: none;
+    border: 1px solid var(--sky-500);
+  }
+}
+
+input[type=text]:disabled,
+input[type=password]:disabled,
+input[type=email]:disabled,
+input[type=number]:disabled,
+input[type=tel]:disabled,
+input[type=datetime-local]:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--gray-300);
+  border: solid 1px var(--gray-500);
+  color: var(--gray-500);
+}
+
+.form__row {
+  display: flex;
+  gap: var(--spacing-unit);
+}

package/dist/styles/layout.scss

@@ -0,0 +1,56 @@
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.basis-0 {
+  flex-basis: 0;
+}
+
+.basis-6\/12,
+.basis-half {
+  flex-basis: 50%;
+}
+
+.position-relative {
+  position: relative;
+}

package/dist/styles/main.scss

@@ -0,0 +1,17 @@
+@import './preflight.scss';
+@import './spacing.scss';
+@import './colors.scss';
+@import './layout.scss';
+@import './shadow.scss';
+@import './rounded.scss';
+@import './text.scss';
+@import './buttons.scss';
+@import './themes.scss';
+@import './form.scss';
+
+body {
+  font-family: var(--theme-font-basic);
+  background-color: var(--theme-background);
+  color: var(--theme-text);
+  transition: background-color 0.5s, color 0.5s;
+}

package/dist/styles/preflight.scss

@@ -0,0 +1,90 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+[multiple],
+[type=date],
+[type=datetime-local],
+[type=email],
+[type=month],
+[type=number],
+[type=password],
+[type=search],
+[type=tel],
+[type=text],
+[type=time],
+[type=url],
+[type=week],
+select,
+textarea {
+  // -webkit-appearance: none;
+  // -moz-appearance: none;
+  // appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+[type=checkbox],
+[type=radio] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type=checkbox]:checked,
+[type=radio]:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type=checkbox] {
+  border-radius: 0;
+}
+
+[type=checkbox]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+fieldset {
+  border: none;
+}

package/dist/styles/rounded.scss

@@ -0,0 +1,18 @@
+:root {
+  --rounded-none: 0px;
+  --rounded-sm: 0.125rem;
+  /* 2px */
+  --rounded: 0.25rem;
+  /* 4px */
+  --rounded-md: 0.375rem;
+  /* 6px */
+  --rounded-lg: 0.5rem;
+  /* 8px */
+  --rounded-xl: 0.75rem;
+  /* 12px */
+  --rounded-2xl: 1rem;
+  /* 16px */
+  --rounded-3xl: 1.5rem;
+  /* 24px */
+  --rounded-full: 9999px;
+}

package/dist/styles/shadow.scss

@@ -0,0 +1,10 @@
+:root {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+}

package/dist/styles/spacing.scss

@@ -0,0 +1,98 @@
+:root {
+  --spacing-unit: 0.325rem;
+}
+
+$spacingMults: (
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20
+);
+
+@each $mult in $spacingMults {
+
+  .m-#{$mult},
+  .mx-#{$mult},
+  .ml-#{$mult} {
+    margin-left: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .m-#{$mult},
+  .mx-#{$mult},
+  .mr-#{$mult} {
+    margin-right: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .m-#{$mult},
+  .my-#{$mult},
+  .mt-#{$mult} {
+    margin-top: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .m-#{$mult},
+  .my-#{$mult},
+  .mb-#{$mult} {
+    margin-bottom: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .p-#{$mult},
+  .px-#{$mult},
+  .pl-#{$mult} {
+    padding-left: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .p-#{$mult},
+  .px-#{$mult},
+  .pr-#{$mult} {
+    padding-right: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .p-#{$mult},
+  .py-#{$mult},
+  .pt-#{$mult} {
+    padding-top: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .p-#{$mult},
+  .px-#{$mult},
+  .pb-#{$mult} {
+    padding-bottom: calc(#{$mult} * var(--spacing-unit));
+  }
+
+  .space-x-#{$mult} {
+    &>* {
+      margin-right: calc(var(--spacing-unit)*#{$mult});
+    }
+
+    &>*:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .space-y-#{$mult} {
+    &>* {
+      margin-bottom: calc(var(--spacing-unit)*#{$mult});
+    }
+
+    &>*:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/dist/styles/text.scss

@@ -0,0 +1,111 @@
+$fontSizes: (
+  'xs': ('size': '0.75rem', 'lineHeight': '1rem'),
+  'sm': ('size': '0.875rem', 'lineHeight': '1.25rem'),
+  'md': ('size': '1rem', 'lineHeight': '1.5rem'),
+  'lg': ('size': '1.125rem', 'lineHeight': '1.75rem'),
+  'xl': ('size': '1.25rem', 'lineHeight': '1.75rem'),
+  '2xl': ('size': '1.5rem', 'lineHeight': '2rem'),
+  '3xl': ('size': '1.875rem', 'lineHeight': '2.25rem'),
+  '4xl': ('size': '2.25rem', 'lineHeight': '2.5rem'),
+  '5xl': ('size': '3rem', 'lineHeight': '1'),
+  '6xl': ('size': '3.75rem', 'lineHeight': '1'),
+  '7xl': ('size': '4.5rem', 'lineHeight': '1'),
+  '8xl': ('size': '6rem', 'lineHeight': '1'),
+  '9xl': ('size': '8rem', 'lineHeight': '1'),
+);
+
+$fontWeights: (
+  'thin': 100,
+  'extralight': 200,
+  'light': 300,
+  'normal': 400,
+  'medium': 500,
+  'semibold': 600,
+  'bold': 700,
+  'extrabold': 800,
+  'black': 900,
+);
+
+:root {
+  @each $fontSize, $properties in $fontSizes {
+    @each $property, $value in $properties {
+      @if $property =='size' {
+        --text-#{$fontSize}: #{$value};
+      }
+
+      @else if $property =='lineHeight' {
+        --text-#{$fontSize}-lh: #{$value};
+      }
+    }
+  }
+
+  @each $fontWeight, $value in $fontWeights {
+    --font-#{$fontWeight}: #{$value};
+  }
+}
+
+@each $fontSize, $properties in $fontSizes {
+  .text-#{$fontSize} {
+    font-size: var(--text-#{$fontSize});
+    line-height: var(--text-#{$fontSize}-lh);
+  }
+}
+
+h2,
+h3,
+h4 {
+  margin-bottom: var(--spacing-unit);
+}
+
+h2 {
+  @extend .text-3xl;
+}
+
+h3 {
+  @extend .text-2xl;
+}
+
+h4 {
+  @extend .text-xl;
+}
+
+p {
+  @extend .text-md;
+  margin-bottom: calc(var(--spacing-unit) * 3);
+}
+
+a {
+  color: var(--theme-link);
+  text-decoration: underline;
+  transition: color 0.5s;
+
+  &:hover {
+    color: color-mix(in HSL, var(--theme-neutral-900) 15%, var(--theme-link));
+  }
+  &:visited {
+    color: var(--theme-link-visited);
+    &:hover {
+      color: color-mix(in HSL, var(--theme-neutral-900) 50%, var(--theme-link-visited));
+    }
+  }
+}
+
+.text-end {
+  text-align: end;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-start {
+  text-align: start;
+}

package/dist/styles/themeDark.scss

@@ -0,0 +1 @@
+@import 'highlight.js/styles/a11y-dark.css';

package/dist/styles/themeLight.scss

@@ -0,0 +1 @@
+@import 'highlight.js/styles/a11y-light.css';

package/dist/styles/themes.scss

@@ -0,0 +1,95 @@
+$themes: (
+  "themeLight": (
+    "theme-font-basic": "'Space Grotesk', sans-serif",
+    "theme-primary": "var(--sky-500)",
+    "background-image": "url('https://res.cloudinary.com/jarautomation/image/upload/e_contrast:level_-100,o_40/v1704849050/joyautomation.com/texture-waves.webp')",
+    "theme-primary-hover": "var(--sky-600)",
+    "theme-secondary": "var(--gray-300)",
+    "theme-text": "var(--black)",
+    "theme-background": "var(--gray-100)",
+    "theme-accent": "var(--amber-500)",
+    "theme-nav": "var(--sky-700)",
+    "theme-link": "var(--amber-500)",
+    "theme-link-visited": "var(--sky-700)",
+    "theme-neutral": (
+      50: 'var(--gray-50)',
+      100: 'var(--gray-100)',
+      200: 'var(--gray-200)',
+      300: 'var(--gray-300)',
+      400: 'var(--gray-400)',
+      500: 'var(--gray-500)',
+      600: 'var(--gray-600)',
+      700: 'var(--gray-700)',
+      800: 'var(--gray-800)',
+      900: 'var(--gray-900)',
+      950: 'var(--gray-950)',
+    ),
+    "theme-logo-neutral": (
+      "light": 'var(--gray-400)',
+      "medium": 'var(--gray-500)',
+      "dark": 'var(--gray-600)',
+    ),
+    "theme-logo-accent": (
+      "light": 'var(--orange-300)',
+      "medium": 'var(--orange-500)',
+      "dark": 'var(--orange-700)',
+    )
+  ),
+  "themeDark": (
+    "theme-font-basic": "'Space Grotesk', sans-serif",
+    "theme-primary": "var(--sky-700)",
+    "background-image": "url('https://res.cloudinary.com/jarautomation/image/upload/e_contrast:level_-100,o_20/v1704849050/joyautomation.com/texture-waves.webp')",
+    "theme-primary-hover": "var(--sky-600)",
+    "theme-text": "var(--white)",
+    "theme-background": "var(--gray-950)",
+    "theme-accent": "var(--amber-700)",
+    "theme-secondary": "var(--gray-800)",
+    "theme-nav": "var(--sky-950)",
+    "theme-link": "var(--amber-500)",
+    "theme-link-visited": "var(--sky-300)",
+    "theme-neutral": (50: 'var(--gray-950)',
+      100: 'var(--gray-900)',
+      200: 'var(--gray-800)',
+      300: 'var(--gray-700)',
+      400: 'var(--gray-600)',
+      500: 'var(--gray-500)',
+      600: 'var(--gray-400)',
+      700: 'var(--gray-300)',
+      800: 'var(--gray-200)',
+      900: 'var(--gray-100)',
+      950: 'var(--gray-50)',
+    ),
+    "theme-logo-neutral": (
+      "light": 'var(--gray-400)',
+      "medium": 'var(--gray-500)',
+      "dark": 'var(--gray-600)',
+    ),
+    "theme-logo-accent": (
+      "light": 'var(--orange-300)',
+      "medium": 'var(--orange-500)',
+      "dark": 'var(--orange-700)',
+    ))
+);
+
+@each $theme-name, $theme-map in $themes {
+
+  // Create a class for the theme
+  .#{$theme-name} {
+
+    // Iterate over each property in the theme map
+    @each $property, $value in $theme-map {
+
+      // Check if the value is a nested map (like for 'neutral')
+      @if (type-of($value)=='map') {
+        @each $nested-key, $nested-value in $value {
+          --#{$property}-#{$nested-key}: #{$nested-value};
+        }
+      }
+
+      @else {
+        --#{$property}: #{$value};
+      }
+    }
+  }
+}
+

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@joyautomation/salt",
+  "version": "0.0.1",
+  "exports": {
+    ".": [
+      "./dist/index.js",
+      {
+        "types": "./dist/index.d.ts"
+      }
+    ],
+    "./styles.scss": "./dist/styles/main.scss"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.5.5",
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "^8.56.10",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "eslint": "^9.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-svelte": "^2.38.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.3",
+    "publint": "^0.1.9",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.1",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@sveltejs/adapter-node": "^5.0.1",
+    "nanoid": "^5.0.7",
+    "sass": "^1.75.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  }
+}