diff --git a/docs/css/custom.css b/docs/css/custom.css index 13f5738..37f4d57 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -79,10 +79,14 @@ } .step { counter-increment: step; - } - .step:before { - @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background; - @apply md:ml-[-50px] md:mt-[-4px]; - content: counter(step); + + &:before { + @apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background; + @apply md:ml-[-50px] md:mt-[-4px]; + content: counter(step); + } + > h3 { + @apply max-md:ml-10 min-h-8 flex items-center; + } } } \ No newline at end of file diff --git a/docs/src/_data/site.js b/docs/src/_data/site.js index f0a5b9f..202a9d3 100644 --- a/docs/src/_data/site.js +++ b/docs/src/_data/site.js @@ -7,5 +7,5 @@ export default { x: "@hunvreus" }, url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com", - version: "beta" + version: "0.2.0" }; \ No newline at end of file diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index 616d9e9..dd3109f 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -5,7 +5,6 @@ :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-amber-50: oklch(98.7% 0.022 95.277); @@ -64,13 +63,6 @@ --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); - --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); - --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-sm: 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); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @@ -253,9 +245,6 @@ } } @layer utilities { - .\@container { - container-type: inline-size; - } .pointer-events-none { pointer-events: none; } @@ -291,9 +280,6 @@ .top-0 { top: calc(var(--spacing) * 0); } - .top-1 { - top: calc(var(--spacing) * 1); - } .top-1\/2 { top: calc(1/2 * 100%); } @@ -303,15 +289,9 @@ .top-22 { top: calc(var(--spacing) * 22); } - .right-2 { - right: calc(var(--spacing) * 2); - } .right-2\.5 { right: calc(var(--spacing) * 2.5); } - .left-1 { - left: calc(var(--spacing) * 1); - } .left-1\/2 { left: calc(1/2 * 100%); } @@ -357,6 +337,9 @@ .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } .mt-8 { margin-top: calc(var(--spacing) * 8); } @@ -375,9 +358,6 @@ .mb-12 { margin-bottom: calc(var(--spacing) * 12); } - .-ml-1 { - margin-left: calc(var(--spacing) * -1); - } .-ml-1\.5 { margin-left: calc(var(--spacing) * -1.5); } @@ -422,10 +402,6 @@ width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } - .size-3 { - width: calc(var(--spacing) * 3); - height: calc(var(--spacing) * 3); - } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); @@ -490,15 +466,9 @@ .min-h-\[350px\] { min-height: 350px; } - .w-1 { - width: calc(var(--spacing) * 1); - } .w-1\/2 { width: calc(1/2 * 100%); } - .w-2 { - width: calc(var(--spacing) * 2); - } .w-2\/3 { width: calc(2/3 * 100%); } @@ -580,42 +550,21 @@ .flex-1 { flex: 1; } - .flex-shrink { - flex-shrink: 1; - } .shrink-0 { flex-shrink: 0; } - .border-collapse { - border-collapse: collapse; - } - .-translate-x-1 { - --tw-translate-x: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-y-1 { - --tw-translate-y: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .translate-y-0 { - --tw-translate-y: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } .animate-pulse { animation: var(--animate-pulse); } @@ -625,9 +574,6 @@ .cursor-pointer { cursor: pointer; } - .resize { - resize: both; - } .scroll-m-20 { scroll-margin: calc(var(--spacing) * 20); } @@ -673,9 +619,6 @@ .justify-start { justify-content: flex-start; } - .gap-0 { - gap: calc(var(--spacing) * 0); - } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } @@ -731,9 +674,6 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } - .gap-x-1 { - column-gap: calc(var(--spacing) * 1); - } .gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); } @@ -823,9 +763,6 @@ .border-amber-50 { border-color: var(--color-amber-50); } - .border-border { - border-color: var(--color-border); - } .border-border\/50 { border-color: var(--color-border); @supports (color: color-mix(in lab, red, red)) { @@ -862,9 +799,6 @@ .bg-sidebar-primary { background-color: var(--color-sidebar-primary); } - .mask-repeat { - mask-repeat: repeat; - } .object-cover { object-fit: cover; } @@ -907,9 +841,6 @@ .px-\[0\.3rem\] { padding-inline: 0.3rem; } - .py-1 { - padding-block: calc(var(--spacing) * 1); - } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } @@ -4508,42 +4439,48 @@ } .step { counter-increment: step; - } - .step:before { - margin-right: calc(var(--spacing) * 2); - display: inline-flex; - height: calc(var(--spacing) * 8); - width: calc(var(--spacing) * 8); - align-items: center; - justify-content: center; - border-radius: calc(infinity * 1px); - border-style: var(--tw-border-style); - border-width: 4px; - border-color: var(--color-background); - background-color: var(--color-muted); - text-align: center; - text-indent: -1px; - font-family: var(--font-mono); - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - @media (width >= 48rem) { + &:before { position: absolute; + margin-right: calc(var(--spacing) * 2); + display: inline-flex; + height: calc(var(--spacing) * 8); + width: calc(var(--spacing) * 8); + align-items: center; + justify-content: center; + border-radius: calc(infinity * 1px); + border-style: var(--tw-border-style); + border-width: 4px; + border-color: var(--color-background); + background-color: var(--color-muted); + text-align: center; + text-indent: -1px; + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + @media (width >= 48rem) { + height: calc(var(--spacing) * 9); + } + @media (width >= 48rem) { + width: calc(var(--spacing) * 9); + } + @media (width >= 48rem) { + margin-top: -4px; + } + @media (width >= 48rem) { + margin-left: -50px; + } + content: counter(step); } - @media (width >= 48rem) { - height: calc(var(--spacing) * 9); + > h3 { + display: flex; + min-height: calc(var(--spacing) * 8); + align-items: center; + @media (width < 48rem) { + margin-left: calc(var(--spacing) * 10); + } } - @media (width >= 48rem) { - width: calc(var(--spacing) * 9); - } - @media (width >= 48rem) { - margin-top: -4px; - } - @media (width >= 48rem) { - margin-left: -50px; - } - content: counter(step); } } :root { @@ -4938,26 +4875,6 @@ code.hljs { inherits: false; initial-value: 0; } -@property --tw-rotate-x { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-y { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-z { - syntax: "*"; - inherits: false; -} -@property --tw-skew-x { - syntax: "*"; - inherits: false; -} -@property --tw-skew-y { - syntax: "*"; - inherits: false; -} @property --tw-space-y-reverse { syntax: "*"; inherits: false; @@ -5172,11 +5089,6 @@ code.hljs { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; diff --git a/docs/src/installation.njk b/docs/src/installation.njk index 79abef0..cc26404 100644 --- a/docs/src/installation.njk +++ b/docs/src/installation.njk @@ -57,7 +57,7 @@ toc:
  1. -

    Add Tailwind CSS

    +

    Add Tailwind CSS

    Basecoat uses Tailwind CSS. You need to install it in your project.

    Follow the Tailwind CSS installation instructions to get started.

    @@ -92,7 +92,32 @@ toc:

  2. (Optional) Add JavaScript files

    -

    Some of the components may require some JavaScript, for example the Tabs component. Follow the instructions on the component's page.

    +

    Some components need some JavaScript/a> (e.g. the Tabs component). There are two ways to get it into your project:

    + +

    Using a build tool (Vite, Webpack…)

    +

    If your project is ESM-aware you can directly import the scripts. To include all components:

    +
    + {% set code %}{% raw %}import 'basecoat-css/all';{% endraw %}{% endset %} + {{ code_block(code, "js") }} +
    +

    Or cherry-pick specific components, for example:

    +
    + {% set code %}{% raw %}import 'basecoat-css/popover'; +import 'basecoat-css/tabs';{% endraw %}{% endset %} + {{ code_block(code, "js") }} +
    +

    Without a build tool

    +

    Copy the pre-built files from node_modules into your public directory (one-off command):

    +
    + {% set code %}npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat{% endset %} + {{ code_block(code, "bash") }} +
    +

    Then reference the script you need:

    +
    + {% set code %}{% endset %} + {{ code_block(code, "html") }} +
    +

    See each component page for the minimal script required.

  3. diff --git a/package.json b/package.json index 3656826..29a8b93 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "basecoat", - "version": "0.2.0-beta.1", + "version": "0.2.0", "description": "shadcn/ui for the rest of us", "author": "hunvreus", "type": "module", diff --git a/packages/cli/package.json b/packages/cli/package.json index 04c118b..2c5bdea 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "basecoat-cli", - "version": "0.2.0-beta.1", + "version": "0.2.0", "description": "Add Basecoat components to your project", "author": "hunvreus", "license": "MIT", diff --git a/packages/css/package.json b/packages/css/package.json index 7bdfafa..c0c35bf 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "basecoat-css", - "version": "0.2.0-beta.1", + "version": "0.2.0", "description": "Tailwind CSS for Basecoat components", "author": { "name": "hunvreus", @@ -36,5 +36,24 @@ "bugs": { "url": "https://github.com/hunvreus/basecoat/issues" }, - "homepage": "https://basecoatui.com/installation#install-css" + "homepage": "https://basecoatui.com/installation#install-npm", + "exports": { + ".": "./dist/basecoat.css", + "./css": "./dist/basecoat.css", + "./all": "./dist/js/all.js", + "./all.min": "./dist/js/all.min.js", + "./dropdown-menu": "./dist/js/dropdown-menu.js", + "./dropdown-menu.min": "./dist/js/dropdown-menu.min.js", + "./popover": "./dist/js/popover.js", + "./popover.min": "./dist/js/popover.min.js", + "./select": "./dist/js/select.js", + "./select.min": "./dist/js/select.min.js", + "./sidebar": "./dist/js/sidebar.js", + "./sidebar.min": "./dist/js/sidebar.min.js", + "./tabs": "./dist/js/tabs.js", + "./tabs.min": "./dist/js/tabs.min.js", + "./toast": "./dist/js/toast.js", + "./toast.min": "./dist/js/toast.min.js", + "./package.json": "./package.json" + } } \ No newline at end of file