From c709aa638c7d3458dd73c3aabadb4924cb1cb80e Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Sun, 12 Feb 2023 00:00:17 +0100 Subject: feat: Add more stuff --- package.json | 1 + pnpm-lock.yaml | 10 + sanity/schemas/description.ts | 24 ++ sanity/schemas/hero.ts | 29 ++ src/app.postcss | 627 +++++++++++++++++++++++++++++++++ src/components/description.svelte | 0 src/components/hero.svelte | 0 src/routes/[lang=lang]/+page.server.ts | 4 +- src/routes/[lang=lang]/+page.svelte | 1 - tailwind.config.cjs | 116 +++++- 10 files changed, 806 insertions(+), 6 deletions(-) create mode 100644 sanity/schemas/description.ts create mode 100644 sanity/schemas/hero.ts create mode 100644 src/components/description.svelte create mode 100644 src/components/hero.svelte diff --git a/package.json b/package.json index 28066bd..50106d0 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.5.5", "@sveltejs/package": "^1.0.2", + "@tailwindcss/aspect-ratio": "^0.4.2", "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.51.0", "autoprefixer": "^10.4.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd484d5..cf69843 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ specifiers: '@sveltejs/adapter-auto': ^2.0.0 '@sveltejs/kit': ^1.5.5 '@sveltejs/package': ^1.0.2 + '@tailwindcss/aspect-ratio': ^0.4.2 '@typescript-eslint/eslint-plugin': ^5.51.0 '@typescript-eslint/parser': ^5.51.0 autoprefixer: ^10.4.13 @@ -37,6 +38,7 @@ devDependencies: '@sveltejs/adapter-auto': 2.0.0_@sveltejs+kit@1.5.5 '@sveltejs/kit': 1.5.5_svelte@3.55.1+vite@4.1.1 '@sveltejs/package': 1.0.2_4x7phaipmicbaooxtnresslofa + '@tailwindcss/aspect-ratio': 0.4.2_tailwindcss@3.2.6 '@typescript-eslint/eslint-plugin': 5.51.0_z4swst3wuuqk4hlme4ajzslgh4 '@typescript-eslint/parser': 5.51.0_7kw3g6rralp5ps6mg3uyzz6azm autoprefixer: 10.4.13_postcss@8.4.21 @@ -441,6 +443,14 @@ packages: - supports-color dev: true + /@tailwindcss/aspect-ratio/0.4.2_tailwindcss@3.2.6: + resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==} + peerDependencies: + tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' + dependencies: + tailwindcss: 3.2.6_postcss@8.4.21 + dev: true + /@types/chai-subset/1.3.3: resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==} dependencies: diff --git a/sanity/schemas/description.ts b/sanity/schemas/description.ts new file mode 100644 index 0000000..211aac3 --- /dev/null +++ b/sanity/schemas/description.ts @@ -0,0 +1,24 @@ +import { baseLanguage } from "./_locales"; + +export default { + name: 'description', + type: 'document', + title: 'Description section', + preview: { + select: { + title: `title.${baseLanguage.id}` + } + }, + fields: [ + { + title: "Title", + name: 'title', + type: 'string', + }, + { + title: "Text", + name: "text", + type: "string", + } + ] +} \ No newline at end of file diff --git a/sanity/schemas/hero.ts b/sanity/schemas/hero.ts new file mode 100644 index 0000000..48e5c77 --- /dev/null +++ b/sanity/schemas/hero.ts @@ -0,0 +1,29 @@ +import { baseLanguage } from "./_locales"; + +export default { + name: 'hero', + type: 'document', + title: 'Hero section', + preview: { + select: { + title: `title.${baseLanguage.id}` + } + }, + fields: [ + { + title: "Title", + name: 'title', + type: 'string', + }, + { + title: "Subtitle", + name: "subtitle", + type: "string", + }, + { + title: "Image", + name: "image", + type: "image" + } + ] +} \ No newline at end of file diff --git a/src/app.postcss b/src/app.postcss index b5c61c9..bbc170b 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,3 +1,630 @@ @tailwind base; @tailwind components; + +/* colors + base typography */ +@layer base { + /* -------------------------------- + + (START) Global editor code https://codyhouse.co/ds/globals/colors + + -------------------------------- */ + :root, + [data-theme="default"] { + /* main */ + --color-primary-darker: 250 84% 38%; + --color-primary-dark: 250 84% 46%; + --color-primary: 250 84% 54%; + --color-primary-light: 250 84% 60%; + --color-primary-lighter: 250 84% 67%; + + --color-accent-darker: 342 89% 38%; + --color-accent-dark: 342 89% 43%; + --color-accent: 342 89% 48%; + --color-accent-light: 342 89% 56%; + --color-accent-lighter: 342 89% 62%; + + --color-black: 231 15% 9%; + --color-white: 0 0% 100%; + + /* feedback */ + --color-warning-darker: 35 79% 48%; + --color-warning-dark: 35 79% 56%; + --color-warning: 35 79% 66%; + --color-warning-light: 35 79% 74%; + --color-warning-lighter: 35 79% 82%; + + --color-success-darker: 170 78% 26%; + --color-success-dark: 170 78% 31%; + --color-success: 170 78% 36%; + --color-success-light: 170 78% 42%; + --color-success-lighter: 170 78% 47%; + + --color-error-darker: 342 89% 38%; + --color-error-dark: 342 89% 43%; + --color-error: 342 89% 48%; + --color-error-light: 342 89% 56%; + --color-error-lighter: 342 89% 62%; + + /* background */ + --color-floor-darker: 240 4% 90%; + --color-floor-dark: 240 4% 95%; + --color-floor: 0 0% 100%; + --color-floor-light: 0 0% 100%; + --color-floor-lighter: 0 0% 100%; + + /* color contrasts */ + --color-contrast-lower: 240 4% 85%; + --color-contrast-low: 240 4% 65%; + --color-contrast-medium: 225 4% 47%; + --color-contrast-high: 230 7% 23%; + --color-contrast-higher: 230 13% 9%; + } + + [data-theme="dark"] { + /* main */ + --color-primary-darker: 250 100% 60%; + --color-primary-dark: 250 100% 64%; + --color-primary: 250 100% 69%; + --color-primary-light: 250 100% 72%; + --color-primary-lighter: 250 100% 76%; + + --color-accent-darker: 342 92% 41%; + --color-accent-dark: 342 92% 47%; + --color-accent: 342 92% 54%; + --color-accent-light: 342 92% 60%; + --color-accent-lighter: 342 92% 65%; + + --color-black: 230 13% 9%; + --color-white: 0 0% 100%; + + /* feedback */ + --color-warning-darker: 35 79% 48%; + --color-warning-dark: 35 79% 56%; + --color-warning: 35 79% 66%; + --color-warning-light: 35 79% 74%; + --color-warning-lighter: 35 79% 82%; + + --color-success-darker: 170 78% 26%; + --color-success-dark: 170 78% 31%; + --color-success: 170 78% 36%; + --color-success-light: 170 78% 42%; + --color-success-lighter: 170 78% 47%; + + --color-error-darker: 342 92% 41%; + --color-error-dark: 342 92% 47%; + --color-error: 342 92% 54%; + --color-error-light: 342 92% 60%; + --color-error-lighter: 342 92% 65%; + + /* background */ + --color-floor-darker: 232 7% 8%; + --color-floor-dark: 233 8% 11%; + --color-floor: 232 11% 15%; + --color-floor-light: 233 8% 19%; + --color-floor-lighter: 232 7% 22%; + + /* color contrasts */ + --color-contrast-lower: 240 6% 26%; + --color-contrast-low: 240 3% 41%; + --color-contrast-medium: 231 3% 57%; + --color-contrast-high: 240 5% 82%; + --color-contrast-higher: 240 100% 99%; + + /* font rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + /* -------------------------------- + + (END) Global editor code + + -------------------------------- */ + + body, + [data-theme] { + @apply bg-floor text-contrast-high; + } + + /* -------------------------------- + + (START) Global editor code https://codyhouse.co/ds/globals/typography + + -------------------------------- */ + + body { + @apply font-sans font-normal; + } + + h1, + h2, + h3, + h4 { + @apply font-bold; + } + + /* -------------------------------- + + (END) Global editor code + + -------------------------------- */ + + body { + @apply text-base lg:text-xl; + } + + h1, + h2, + h3, + h4 { + @apply text-contrast-higher; + } + + h1 { + @apply text-3xl lg:text-5xl; + } + + h2 { + @apply text-2xl lg:text-4xl; + } + + h3 { + @apply text-xl lg:text-3xl; + } + + h4 { + @apply text-lg lg:text-2xl; + } + + small { + @apply text-sm lg:text-base; + } + + a, + .link { + @apply text-primary underline; + } + + strong { + @apply font-bold; + } + + s { + @apply line-through; + } + + u { + @apply underline; + } + + mark { + @apply bg-accent/20 text-inherit; + } + + /* no-js support */ + html:not(.js) .no-js\:is-hidden { + display: none !important; + } +} + +/* button components */ + +/* -------------------------------- +-------------------------------- */ +@layer components { + .btn { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + white-space: nowrap; + font-size: 1em; + @apply px-3 lg:px-5 py-1.5 lg:py-2 rounded bg-floor-dark text-contrast-higher; + cursor: pointer; + text-decoration: none; + line-height: 1.2; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transition: all 0.2s ease; + will-change: transform; + } + + .btn:focus-visible { + box-shadow: 0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 2px hsla(var(--color-contrast-higher) / 0.15); + outline: none; + } + + .btn:active { + transform: translateY(2px); + } + + /* themes */ + .btn--primary { + background: hsl(var(--color-primary)); + color: hsl(var(--color-white)); + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-primary-darker) / 0.25), + 0px 2px 6px hsla(var(--color-primary-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker) / 0.25); + } + + .btn--primary:hover { + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25), + 0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25); + } + + .btn--primary:focus-visible { + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25), + 0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25), + 0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 4px hsl(var(--color-primary)); + } + + .btn--subtle { + background: hsl(var(--color-floor-lighter)); + color: hsl(var(--color-contrast-higher)); + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02), + 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), + 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1); + } + + .btn--subtle:hover { + background: hsl(var(--color-floor-light)); + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02), + 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12); + } + + .btn--subtle:focus-visible { + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02), + 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12), + 0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-contrast-high)); + } + + .btn--accent { + background: hsl(var(--color-accent)); + color: hsl(var(--color-white)); + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-accent-darker) / 0.25), + 0px 2px 6px hsla(var(--color-accent-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker) / 0.25); + } + + .btn--accent:hover { + background: hsl(var(--color-accent-light)); + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25), + 0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1); + } + + .btn--accent:focus-visible { + box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25), + 0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1), + 0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-accent)); + } + + /* feedback */ + .btn--disabled, + .btn[disabled], + .btn[readonly] { + opacity: 0.6; + cursor: not-allowed; + } +} + +/* -------------------------------- + + (END) Global editor code + +-------------------------------- */ + +/* input/form style */ + +/* -------------------------------- + + (START) Global editor code https://codyhouse.co/ds/globals/forms + +-------------------------------- */ +@layer components { + .form-control { + font-size: 1em; + @apply px-2 lg:px-3 py-1.5 lg:py-2 rounded bg-floor-dark; + line-height: 1.2; + box-shadow: inset 0px 0px 0px 1px hsl(var(--color-contrast-lower)); + transition: all 0.2s ease; + } + + .form-control::placeholder { + opacity: 1; + @apply text-contrast-low; + } + + .form-control:focus, + .form-control:focus-within { + @apply bg-floor; + box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-primary)), + 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1); + outline: none; + } + + .form-control--disabled, + .form-control[disabled], + .form-control[readonly] { + opacity: 0.5; + cursor: not-allowed; + } + + .form-control[aria-invalid="true"], + .form-control.form-control--error { + box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error)); + } + + .form-control[aria-invalid="true"]:focus, + .form-control[aria-invalid="true"]:focus-within, + .form-control.form-control--error:focus, + .form-control.form-control--error:focus-within { + box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error)), + 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1); + } + + .form-legend { + @apply mb-3 lg:mb-5 text-contrast-higher text-lg lg:text-2xl; + } + + .form-label { + display: inline-block; + @apply text-sm lg:text-base; + } +} + +/* -------------------------------- + + (END) Global editor code + +-------------------------------- */ + +/* text component + icon + inner shadow */ +@layer components { + /* Custom text component classes */ + .text-component { + --line-height-multiplier: 1; + --text-space-y-multiplier: 1; + --heading-line-height: 1.2; + --body-line-height: 1.4; + } + .text-component.leading-extra-tight { + line-height: normal; + --heading-line-height: 1; + --body-line-height: 1.1; + } + .text-component.leading-tight { + --heading-line-height: 1.1; + --body-line-height: 1.2; + line-height: normal; + } + .text-component.leading-snug { + --heading-line-height: 1.15; + --body-line-height: 1.4; + line-height: normal; + } + .text-component.leading-normal { + --heading-line-height: 1.22; + --body-line-height: 1.58; + line-height: normal; + } + .text-component.leading-relaxed { + --heading-line-height: 1.3; + --body-line-height: 1.72; + line-height: normal; + } + + .text-component.text-space-y-xxs { + --text-space-y-multiplier: 0.25; + } + .text-component.text-space-y-xs { + --text-space-y-multiplier: 0.5; + } + .text-component.text-space-y-sm { + --text-space-y-multiplier: 0.75; + } + .text-component.text-space-y-md { + --text-space-y-multiplier: 1.25; + } + .text-component.text-space-y-lg { + --text-space-y-multiplier: 1.5; + } + .text-component.text-space-y-xl { + --text-space-y-multiplier: 1.75; + } + .text-component.text-space-y-xxl { + --text-space-y-multiplier: 2; + } + + .text-component :where(h1), + .text-component :where(h2), + .text-component :where(h3), + .text-component :where(h4) { + line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1)); + margin-bottom: calc(0.3125em * var(--text-space-y-multiplier, 1)); + } + + .text-component :where(h2), + .text-component :where(h3), + .text-component :where(h4) { + margin-top: calc(0.9375em * var(--text-space-y-multiplier, 1)); + } + + .text-component p, + .text-component blockquote, + .text-component ul li, + .text-component ol li { + line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1)); + } + + .text-component ul, + .text-component ol, + .text-component p, + .text-component blockquote { + margin-bottom: calc(0.9375em * var(--text-space-y-multiplier, 1)); + } + + .text-component :where(ul), + .text-component :where(ol) { + list-style-position: inside; + } + + .text-component ul ul, + .text-component ul ol, + .text-component ol ul, + .text-component ol ol { + padding-left: 1em; + margin-bottom: 0; + } + + .text-component :where(ul) { + list-style-type: disc; + } + + .text-component :where(ol) { + list-style-type: decimal; + } + + .text-component :where(img) { + display: block; + margin: 0 auto; + } + + .text-component :where(figcaption) { + @apply text-contrast-low text-sm lg:text-base; + text-align: center; + margin-top: 0.5em; + } + + .text-component :where(em) { + font-style: italic; + } + + .text-component :where(hr) { + @apply bg-contrast-lower; + height: 1px; + margin-top: calc(1.875em * var(--text-space-y-multiplier, 1)); + margin-bottom: calc(1.875em * var(--text-space-y-multiplier, 1)); + margin-left: auto; + margin-right: auto; + border: none; + } + + .text-component > *:first-child { + margin-top: 0; + } + + .text-component > *:last-child { + margin-bottom: 0; + } + + .text-component :where(blockquote) { + padding-left: 1em; + @apply border-l-4 border-contrast-lower; + font-style: italic; + } + + .article { + /* e.g., blog posts */ + --body-line-height: 1.58; + --text-space-y-multiplier: 1.2; + } + + /* Icons */ + .icon { + --size: 1em; + height: var(--size); + width: var(--size); + display: inline-block; + color: inherit; + fill: currentColor; + line-height: 1; + flex-shrink: 0; + max-width: initial; + } + + .icon--is-spinning { + animation: icon-spin 1s infinite linear; + } + + @keyframes icon-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + /* inner shadow */ + :where(.inner-glow, .inner-glow-top) { + position: relative; + } + + .inner-glow::after, + .inner-glow-top::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + pointer-events: none; + } + + .inner-glow::after { + box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); + } + .inner-glow-top::after { + box-shadow: var(inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075)); + } +} + +/* #region CodyHouse components CSS */ + +/* #endregion */ + @tailwind utilities; + +/* custom utility classes */ +@layer utilities { + /* overflow */ + .momentum-scrolling { + -webkit-overflow-scrolling: touch; + } + + /* perspective */ + .perspective-xs { + perspective: 250px; + } + .perspective-sm { + perspective: 500px; + } + .perspective-md { + perspective: 1000px; + } + .perspective-lg { + perspective: 1500px; + } + .perspective-xl { + perspective: 3000px; + } + + /* text shadow */ + .text-shadow-xs { + text-shadow: 0 1px 1px rgba(#000, 0.15); + } + .text-shadow-sm { + text-shadow: 0 1px 2px rgba(#000, 0.25); + } + .text-shadow-md { + text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2); + } + .text-shadow-lg { + text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2); + } + .text-shadow-xl { + text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2), + 0 6px 24px rgba(#000, 0.25); + } + .text-shadow-none { + text-shadow: none; + } +} diff --git a/src/components/description.svelte b/src/components/description.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/components/hero.svelte b/src/components/hero.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/[lang=lang]/+page.server.ts b/src/routes/[lang=lang]/+page.server.ts index d3a98a5..6e0a910 100644 --- a/src/routes/[lang=lang]/+page.server.ts +++ b/src/routes/[lang=lang]/+page.server.ts @@ -6,8 +6,8 @@ import { fromLocalizedString } from '$lib/utils'; export const load = (async ({ locals }) => { const contactSection = await sanity.fetch(groq`*[_type == "contact"][0]`); - console.log(contactSection); - + const heroSection = await sanity.fetch(groq`*[_type == "hero"][0]`); + const descriptionSection = await sanity.fetch(groq`*[_type == "description"][0]`); return { contact: { phone: fromLocalizedString(contactSection.phone, locals.locale), diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte index 666aa80..b757a71 100644 --- a/src/routes/[lang=lang]/+page.svelte +++ b/src/routes/[lang=lang]/+page.svelte @@ -11,7 +11,6 @@ const M: Model = { contact: data.contact, }; - console.log(data); diff --git a/tailwind.config.cjs b/tailwind.config.cjs index aac61b2..5294834 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,7 +1,117 @@ module.exports = { content: ["./src/**/*.{html,js,svelte,ts}"], theme: { - extend: {}, + colors: { + transparent: "transparent", + current: "currentColor", + inherit: "inherit", + primary: { + DEFAULT: "hsl(var(--color-primary) / )", + darker: "hsl(var(--color-primary-darker) / )", + dark: "hsl(var(--color-primary-dark) / )", + light: "hsl(var(--color-primary-light) / )", + lighter: "hsl(var(--color-primary-lighter) / )", + }, + accent: { + DEFAULT: "hsl(var(--color-accent) / )", + darker: "hsl(var(--color-accent-darker) / )", + dark: "hsl(var(--color-accent-dark) / )", + light: "hsl(var(--color-accent-light) / )", + lighter: "hsl(var(--color-accent-lighter) / )", + }, + black: "hsl(var(--color-black) / )", + white: "hsl(var(--color-white) / )", + warning: { + DEFAULT: "hsl(var(--color-warning) / )", + darker: "hsl(var(--color-warning-darker) / )", + dark: "hsl(var(--color-warning-dark) / )", + light: "hsl(var(--color-warning-light) / )", + lighter: "hsl(var(--color-warning-lighter) / )", + }, + success: { + DEFAULT: "hsl(var(--color-success) / )", + darker: "hsl(var(--color-success-darker) / )", + dark: "hsl(var(--color-success-dark) / )", + light: "hsl(var(--color-success-light) / )", + lighter: "hsl(var(--color-success-lighter) / )", + }, + error: { + DEFAULT: "hsl(var(--color-error) / )", + darker: "hsl(var(--color-error-darker) / )", + dark: "hsl(var(--color-error-dark) / )", + light: "hsl(var(--color-error-light) / )", + lighter: "hsl(var(--color-error-lighter) / )", + }, + floor: { + DEFAULT: "hsl(var(--color-floor) / )", + darker: "hsl(var(--color-floor-darker) / )", + dark: "hsl(var(--color-floor-dark) / )", + light: "hsl(var(--color-floor-light) / )", + lighter: "hsl(var(--color-floor-lighter) / )", + }, + contrast: { + lower: "hsl(var(--color-contrast-lower) / )", + low: "hsl(var(--color-contrast-low) / )", + medium: "hsl(var(--color-contrast-medium) / )", + high: "hsl(var(--color-contrast-high) / )", + higher: "hsl(var(--color-contrast-higher) / )", + }, + }, + extend: { + zIndex: { + 1: "1", + 2: "2", + 3: "3", + 5: "5", + 15: "15", + }, + borderRadius: { + inherit: "inherit", + }, + lineHeight: { + "extra-tight": "1.1", + }, + transitionTimingFunction: { + "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)", + }, + boxShadow: { + "inner-xs": + "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)", + "inner-2xs": + "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)", + "inner-sm": + "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1)", + "inner-md": + "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12)", + "inner-lg": + "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15)", + "inner-top-xs": + "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)", + "inner-top-sm": + "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1)", + "inner-top-md": + "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12)", + "inner-top-lg": + "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15)", + }, + opacity: { + 7: ".07", + 8: ".08", + 9: ".09", + 12: ".12", + 15: ".15", + 35: ".35", + 65: ".65", + 85: ".85", + 98: ".98", + }, + borderWidth: { + 3: "3px", + }, + outlineWidth: { + 3: "3px", + }, + }, }, - plugins: [], -}; + plugins: [require("@tailwindcss/aspect-ratio")], +}; \ No newline at end of file -- cgit v1.3