From 930e0ee6f1f92b237885ddd0cee0ed188f56b77d Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Thu, 1 May 2025 12:50:40 +0800 Subject: [PATCH] Almost done with documentation --- docs/css/custom.css | 55 +++ docs/css/styles.css | 16 + docs/css/theme-orange.css | 68 ++++ docs/css/theme.css | 146 ++++++++ docs/src/_includes/components/dialog.njk | 2 +- .../_includes/components/dropdown-menu.njk | 11 + docs/src/_includes/components/popover.njk | 11 + docs/src/_includes/components/select.njk | 22 +- docs/src/_includes/components/tabs.njk | 17 + docs/src/_includes/components/toast.njk | 21 ++ docs/src/_includes/layouts/component.njk | 39 -- docs/src/_includes/layouts/page.njk | 54 +-- docs/src/_includes/macros/code_block.njk | 7 +- docs/src/_includes/macros/code_preview.njk | 2 +- docs/src/assets/styles.css | 335 ++++++++---------- docs/src/components/accordion.njk | 5 +- docs/src/components/alert-dialog.njk | 2 +- docs/src/components/alert.njk | 2 +- docs/src/components/avatar.njk | 2 +- docs/src/components/badge.njk | 2 +- docs/src/components/breadcrumb.njk | 2 +- docs/src/components/button.njk | 2 +- docs/src/components/card.njk | 2 +- docs/src/components/checkbox.njk | 2 +- docs/src/components/combobox.njk | 2 +- docs/src/components/dialog.njk | 2 +- docs/src/components/dropdown-menu.njk | 2 +- docs/src/components/form.njk | 2 +- docs/src/components/input.njk | 2 +- docs/src/components/label.njk | 2 +- docs/src/components/pagination.njk | 2 +- docs/src/components/popover.njk | 2 +- docs/src/components/radio-group.njk | 2 +- docs/src/components/select.njk | 2 +- docs/src/components/skeleton.njk | 2 +- docs/src/components/slider.njk | 2 +- docs/src/components/switch.njk | 2 +- docs/src/components/table.njk | 2 +- docs/src/components/tabs.njk | 2 +- docs/src/components/textarea.njk | 2 +- docs/src/components/toast.njk | 2 +- docs/src/components/tooltip.njk | 2 +- docs/src/installation.njk | 112 +++++- docs/styles.css | 13 - docs/theme.css | 146 -------- package.json | 4 +- src/basecoat.css | 120 ------- 47 files changed, 681 insertions(+), 577 deletions(-) create mode 100644 docs/css/custom.css create mode 100644 docs/css/styles.css create mode 100644 docs/css/theme-orange.css create mode 100644 docs/css/theme.css delete mode 100644 docs/src/_includes/layouts/component.njk delete mode 100644 docs/styles.css delete mode 100644 docs/theme.css diff --git a/docs/css/custom.css b/docs/css/custom.css new file mode 100644 index 0000000..1b06eea --- /dev/null +++ b/docs/css/custom.css @@ -0,0 +1,55 @@ +.content { + > h2 { + @apply mt-16 mb-6 scroll-m-22 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0; + } + > h3 { + @apply mt-8 mb-6 scroll-m-22 text-lg font-semibold tracking-tight; + } + .prose { + @apply my-6; + + a { + @apply font-medium underline underline-offset-4; + } + code:not(pre > code) { + @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm; + } + blockquote { + @apply border-l-4 border-border pl-4; + } + ol { + @apply list-decimal ml-6; + } + ul { + @apply list-disc ml-6; + } + b, + strong { + @apply font-semibold; + } + > p, + > blockquote, + > ul, + > ol, + > dl, + > table, + > pre, + > p { + @apply my-4; + } + > *:first-child { + @apply !mt-0; + } + > *:last-child { + @apply !mb-0; + } + } + .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); + } +} \ No newline at end of file diff --git a/docs/css/styles.css b/docs/css/styles.css new file mode 100644 index 0000000..641a99f --- /dev/null +++ b/docs/css/styles.css @@ -0,0 +1,16 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); + +@import "tailwindcss"; +@import "basecoat"; +@import "./custom.css"; + +@theme { + --font-sans: 'Inter'; + --font-mono: 'JetBrains Mono'; +} + +/* @import "./theme-orange.css"; */ \ No newline at end of file diff --git a/docs/css/theme-orange.css b/docs/css/theme-orange.css new file mode 100644 index 0000000..7822a0a --- /dev/null +++ b/docs/css/theme-orange.css @@ -0,0 +1,68 @@ +:root { + --radius: 0.5rem; + --background: oklch(1 0 0); + --foreground: oklch(0.141 0.005 285.823); + --card: oklch(1 0 0); + --card-foreground: oklch(0.141 0.005 285.823); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.606 0.25 292.717); + --primary-foreground: oklch(0.969 0.016 293.756); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.606 0.25 292.717); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.606 0.25 292.717); + --sidebar-primary-foreground: oklch(0.969 0.016 293.756); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.606 0.25 292.717); +} + +.dark { + --background: oklch(0.141 0.005 285.823); + --foreground: oklch(0.985 0 0); + --card: oklch(0.21 0.006 285.885); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.21 0.006 285.885); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.541 0.281 293.009); + --primary-foreground: oklch(0.969 0.016 293.756); + --secondary: oklch(0.274 0.006 286.033); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.541 0.281 293.009); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.21 0.006 285.885); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.541 0.281 293.009); + --sidebar-primary-foreground: oklch(0.969 0.016 293.756); + --sidebar-accent: oklch(0.274 0.006 286.033); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.541 0.281 293.009); +} diff --git a/docs/css/theme.css b/docs/css/theme.css new file mode 100644 index 0000000..45a3a77 --- /dev/null +++ b/docs/css/theme.css @@ -0,0 +1,146 @@ +:root { + --background: oklch(1.00 0 0); + --foreground: oklch(0.27 0 0); + --card: oklch(1.00 0 0); + --card-foreground: oklch(0.27 0 0); + --popover: oklch(1.00 0 0); + --popover-foreground: oklch(0.27 0 0); + --primary: oklch(0.77 0.16 70.08); + --primary-foreground: oklch(0 0 0); + --secondary: oklch(0.97 0.00 264.54); + --secondary-foreground: oklch(0.45 0.03 256.80); + --muted: oklch(0.98 0.00 247.84); + --muted-foreground: oklch(0.55 0.02 264.36); + --accent: oklch(0.99 0.02 95.28); + --accent-foreground: oklch(0.47 0.12 46.20); + --destructive: oklch(0.64 0.21 25.33); + --destructive-foreground: oklch(1.00 0 0); + --border: oklch(0.93 0.01 264.53); + --input: oklch(0.93 0.01 264.53); + --ring: oklch(0.77 0.16 70.08); + --chart-1: oklch(0.77 0.16 70.08); + --chart-2: oklch(0.67 0.16 58.32); + --chart-3: oklch(0.56 0.15 49.00); + --chart-4: oklch(0.47 0.12 46.20); + --chart-5: oklch(0.41 0.11 45.90); + --sidebar: oklch(0.98 0.00 247.84); + --sidebar-foreground: oklch(0.27 0 0); + --sidebar-primary: oklch(0.77 0.16 70.08); + --sidebar-primary-foreground: oklch(1.00 0 0); + --sidebar-accent: oklch(0.99 0.02 95.28); + --sidebar-accent-foreground: oklch(0.47 0.12 46.20); + --sidebar-border: oklch(0.93 0.01 264.53); + --sidebar-ring: oklch(0.77 0.16 70.08); + --font-sans: Inter, sans-serif; + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --radius: 0.375rem; + --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); + --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); + --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); + --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); + --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); + --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); + --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); + --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25); +} + +.dark { + --background: oklch(0.20 0 0); + --foreground: oklch(0.92 0 0); + --card: oklch(0.27 0 0); + --card-foreground: oklch(0.92 0 0); + --popover: oklch(0.27 0 0); + --popover-foreground: oklch(0.92 0 0); + --primary: oklch(0.77 0.16 70.08); + --primary-foreground: oklch(0 0 0); + --secondary: oklch(0.27 0 0); + --secondary-foreground: oklch(0.92 0 0); + --muted: oklch(0.27 0 0); + --muted-foreground: oklch(0.72 0 0); + --accent: oklch(0.47 0.12 46.20); + --accent-foreground: oklch(0.92 0.12 95.75); + --destructive: oklch(0.64 0.21 25.33); + --destructive-foreground: oklch(1.00 0 0); + --border: oklch(0.37 0 0); + --input: oklch(0.37 0 0); + --ring: oklch(0.77 0.16 70.08); + --chart-1: oklch(0.84 0.16 84.43); + --chart-2: oklch(0.67 0.16 58.32); + --chart-3: oklch(0.47 0.12 46.20); + --chart-4: oklch(0.56 0.15 49.00); + --chart-5: oklch(0.47 0.12 46.20); + --sidebar: oklch(0.17 0 0); + --sidebar-foreground: oklch(0.92 0 0); + --sidebar-primary: oklch(0.77 0.16 70.08); + --sidebar-primary-foreground: oklch(1.00 0 0); + --sidebar-accent: oklch(0.47 0.12 46.20); + --sidebar-accent-foreground: oklch(0.92 0.12 95.75); + --sidebar-border: oklch(0.37 0 0); + --sidebar-ring: oklch(0.77 0.16 70.08); + --font-sans: Inter, sans-serif; + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --radius: 0.375rem; + --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); + --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05); + --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); + --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); + --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); + --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); + --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); + --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); +} \ No newline at end of file diff --git a/docs/src/_includes/components/dialog.njk b/docs/src/_includes/components/dialog.njk index 80dca78..c6232f3 100644 --- a/docs/src/_includes/components/dialog.njk +++ b/docs/src/_includes/components/dialog.njk @@ -110,7 +110,7 @@ @click="hide()" aria-label="Close dialog" > - {% lucide "x" %} + {% endif %} diff --git a/docs/src/_includes/components/dropdown-menu.njk b/docs/src/_includes/components/dropdown-menu.njk index 09b8e50..5a6c3be 100644 --- a/docs/src/_includes/components/dropdown-menu.njk +++ b/docs/src/_includes/components/dropdown-menu.njk @@ -1,3 +1,14 @@ +{# + Renders a dropdown menu component. + + @param id {string} [optional] - Unique identifier for the dropdown component. + @param trigger {string} [optional] - HTML content for the button that triggers the dropdown. + @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. + @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button. + @param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div. + @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script. + @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on. +#} {% macro dropdown_menu( id=None, trigger=None, diff --git a/docs/src/_includes/components/popover.njk b/docs/src/_includes/components/popover.njk index f8c7e3d..23452a3 100644 --- a/docs/src/_includes/components/popover.njk +++ b/docs/src/_includes/components/popover.njk @@ -1,3 +1,14 @@ +{# + Renders a generic popover component, often used internally by other components like dropdowns or selects. + + @param id {string} [optional] - Unique identifier for the popover component. + @param trigger {string} [optional] - HTML content for the element that triggers the popover. + @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. + @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element. + @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div. + @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script. + @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on. +#} {% macro popover( id=None, trigger=None, diff --git a/docs/src/_includes/components/select.njk b/docs/src/_includes/components/select.njk index fa587e1..267103e 100644 --- a/docs/src/_includes/components/select.njk +++ b/docs/src/_includes/components/select.njk @@ -1,3 +1,19 @@ +{# + Renders a select or combobox component. + + @param id {string} [optional] - Unique identifier for the select component. + @param selected {string} [optional] - The initially selected value. + @param name {string} [optional] - The name attribute for the hidden input storing the selected value. + @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. + @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button. + @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div. + @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div. + @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input. + @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only). + @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true. + @param include_script {boolean} [optional] [default=false] - Whether to include the Alpine.js component script. + @param register_on {array} [optional] [default=[\"alpine:init\"]] - Alpine.js events to register the component on. +#} {% macro select( id=None, selected=None, @@ -42,9 +58,9 @@
{% if is_combobox %} - {% lucide "chevrons-up-down", class="text-muted-foreground opacity-50 shrink-0" %} + {% else %} - {% lucide "chevron-down", class="text-muted-foreground opacity-50 shrink-0" %} + {% endif %}
{% if is_combobox %}
- {% lucide "search" %} + -
-
-

{{ title }}

-

{{ description }}

-
-
- {{ content | safe }} -
-
- - \ No newline at end of file diff --git a/docs/src/_includes/layouts/page.njk b/docs/src/_includes/layouts/page.njk index fa436f0..15cd3fc 100644 --- a/docs/src/_includes/layouts/page.njk +++ b/docs/src/_includes/layouts/page.njk @@ -3,37 +3,37 @@ layout: layouts/base.njk ---
-
+
-

{{ title }}

+

{{ title }}

{{ description }}

-
+
{{ content | safe }}
- + {% if toc %} + + {% endif %}
\ No newline at end of file diff --git a/docs/src/_includes/macros/code_block.njk b/docs/src/_includes/macros/code_block.njk index 58c993d..271935f 100644 --- a/docs/src/_includes/macros/code_block.njk +++ b/docs/src/_includes/macros/code_block.njk @@ -1,6 +1,6 @@ -{% macro code_block(code, language="html") %} +{% macro code_block(code, language="html", class="my-4") %}
-{% endmacro %} - +{% endmacro %} \ No newline at end of file diff --git a/docs/src/_includes/macros/code_preview.njk b/docs/src/_includes/macros/code_preview.njk index 8ccee78..0146792 100644 --- a/docs/src/_includes/macros/code_preview.njk +++ b/docs/src/_includes/macros/code_preview.njk @@ -1,6 +1,6 @@ {% macro code_preview(id, code, class=None, default_code=false) %} {% from "./code_block.njk" import code_block %} -{% set code_panel = code_block(code) %} +{% set code_panel = code_block(code, class="") %} {% set preview_panel %}
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index feda404..0d60202 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -1,4 +1,7 @@ /*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */ +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); @layer properties; @@ -45,8 +48,6 @@ --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --font-weight-normal: 400; @@ -340,18 +341,30 @@ .mx-auto { margin-inline: auto; } + .my-4 { + margin-block: calc(var(--spacing) * 4); + } .my-6 { margin-block: calc(var(--spacing) * 6); } .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } .mr-auto { margin-right: auto; } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } + .mb-12 { + margin-bottom: calc(var(--spacing) * 12); + } .ml-\(--sidebar-width\) { margin-left: var(--sidebar-width); } @@ -370,6 +383,9 @@ .hidden { display: none; } + .inline { + display: inline; + } .inline-block { display: inline-block; } @@ -503,9 +519,6 @@ .max-w-xl { max-width: var(--container-xl); } - .min-w-0 { - min-width: calc(var(--spacing) * 0); - } .min-w-5 { min-width: calc(var(--spacing) * 5); } @@ -538,6 +551,9 @@ .cursor-pointer { cursor: pointer; } + .scroll-m-20 { + scroll-margin: calc(var(--spacing) * 20); + } .scroll-mt-16 { scroll-margin-top: calc(var(--spacing) * 16); } @@ -758,9 +774,6 @@ .py-6 { padding-block: calc(var(--spacing) * 6); } - .pt-8 { - padding-top: calc(var(--spacing) * 8); - } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } @@ -1205,6 +1218,11 @@ gap: calc(var(--spacing) * 2.5); } } + .md\:ml-4 { + @media (width >= 48rem) { + margin-left: calc(var(--spacing) * 4); + } + } .md\:max-w-\[200px\] { @media (width >= 48rem) { max-width: 200px; @@ -1215,6 +1233,17 @@ flex-direction: row; } } + .md\:border-l { + @media (width >= 48rem) { + border-left-style: var(--tw-border-style); + border-left-width: 1px; + } + } + .md\:pl-8 { + @media (width >= 48rem) { + padding-left: calc(var(--spacing) * 8); + } + } .lg\:gap-10 { @media (width >= 64rem) { gap: calc(var(--spacing) * 10); @@ -1527,80 +1556,6 @@ height: calc(var(--spacing) * 4); } } - .\[\&\>h2\]\:mt-16 { - &>h2 { - margin-top: calc(var(--spacing) * 16); - } - } - .\[\&\>h2\]\:scroll-m-22 { - &>h2 { - scroll-margin: calc(var(--spacing) * 22); - } - } - .\[\&\>h2\]\:border-b { - &>h2 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 1px; - } - } - .\[\&\>h2\]\:pb-4 { - &>h2 { - padding-bottom: calc(var(--spacing) * 4); - } - } - .\[\&\>h2\]\:text-xl { - &>h2 { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - } - .\[\&\>h2\]\:font-semibold { - &>h2 { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - } - .\[\&\>h2\]\:tracking-tight { - &>h2 { - --tw-tracking: var(--tracking-tight); - letter-spacing: var(--tracking-tight); - } - } - .\[\&\>h2\]\:first\:mt-0 { - &>h2 { - &:first-child { - margin-top: calc(var(--spacing) * 0); - } - } - } - .\[\&\>h3\]\:mt-8 { - &>h3 { - margin-top: calc(var(--spacing) * 8); - } - } - .\[\&\>h3\]\:scroll-m-22 { - &>h3 { - scroll-margin: calc(var(--spacing) * 22); - } - } - .\[\&\>h3\]\:text-lg { - &>h3 { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - } - .\[\&\>h3\]\:font-semibold { - &>h3 { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - } - .\[\&\>h3\]\:tracking-tight { - &>h3 { - --tw-tracking: var(--tracking-tight); - letter-spacing: var(--tracking-tight); - } - } .\[\&\>svg\]\:size-4 { &>svg { width: calc(var(--spacing) * 4); @@ -3823,117 +3778,119 @@ } } } -@layer components { - .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .h1, .h2, .h3, .h4, .h5, .h6 { - --tw-leading: var(--leading-tight); - line-height: var(--leading-tight); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - .prose h1, .h1 { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - .prose h2, .h2 { +.content { + > h2 { + margin-top: calc(var(--spacing) * 16); + margin-bottom: calc(var(--spacing) * 6); + scroll-margin: calc(var(--spacing) * 22); + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); - } - .prose h3, .h3 { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - .prose h4, .prose h5, .prose h6, .h4, .h5, .h6 { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - .prose a, .link { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - text-decoration-line: underline; - text-underline-offset: 4px; - } - .prose code, .code { - position: relative; - border-radius: 0.25rem; - background-color: var(--color-muted); - padding-inline: 0.3rem; - padding-block: 0.2rem; - font-family: var(--font-mono); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .prose pre:has(> code), .code-block { - border-radius: var(--radius-md); - border-color: var(--color-border); - background-color: var(--color-muted); - } - .prose pre code, .code-block code { - display: inline-block; - padding: calc(var(--spacing) * 4); - font-family: var(--font-mono); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .prose blockquote, .quote { - border-left-style: var(--tw-border-style); - border-left-width: 4px; - border-color: var(--color-border); - padding-left: calc(var(--spacing) * 4); - } - .prose ol, .ordered-list { - margin-block: calc(var(--spacing) * 6); - margin-left: calc(var(--spacing) * 6); - list-style-type: decimal; - li { - margin-bottom: calc(var(--spacing) * 2); - } - } - .prose ul, .unordered-list { - margin-block: calc(var(--spacing) * 6); - margin-left: calc(var(--spacing) * 6); - list-style-type: disc; - li { - margin-bottom: calc(var(--spacing) * 2); - } - ul, ol { - margin-block: calc(var(--spacing) * 2); - } - } - .prose > *:first-child { - margin-top: calc(var(--spacing) * 0) !important; - } - .prose > *:last-child { - margin-bottom: calc(var(--spacing) * 0) !important; - } - .prose h1 { - margin-bottom: calc(var(--spacing) * 8); - } - .prose h2 { - margin-top: calc(var(--spacing) * 8); - margin-bottom: calc(var(--spacing) * 6); - } - .prose h3 { - margin-top: calc(var(--spacing) * 6); - margin-bottom: calc(var(--spacing) * 4); - } - .prose h4 { - margin-block: calc(var(--spacing) * 4); - } - .prose h5 { - margin-block: calc(var(--spacing) * 4); - } - .prose h6 { - margin-block: calc(var(--spacing) * 4); - } - .prose > p, .prose > blockquote, .prose > ul, .prose > ol, .prose > dl, .prose > table, .prose > pre, .prose > p { - margin-block: calc(var(--spacing) * 4); - } - .prose > *:last-child { - margin-bottom: calc(var(--spacing) * 0) !important; - } - .prose strong, .prose b { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + &:first-child { + margin-top: calc(var(--spacing) * 0); + } + } + > h3 { + margin-top: calc(var(--spacing) * 8); + margin-bottom: calc(var(--spacing) * 6); + scroll-margin: calc(var(--spacing) * 22); + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + } + .prose { + margin-block: calc(var(--spacing) * 6); + a { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + text-decoration-line: underline; + text-underline-offset: 4px; + } + code:not(pre > code) { + position: relative; + border-radius: 0.25rem; + background-color: var(--color-muted); + padding-inline: 0.3rem; + padding-block: 0.2rem; + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + blockquote { + border-left-style: var(--tw-border-style); + border-left-width: 4px; + border-color: var(--color-border); + padding-left: calc(var(--spacing) * 4); + } + ol { + margin-left: calc(var(--spacing) * 6); + list-style-type: decimal; + } + ul { + margin-left: calc(var(--spacing) * 6); + list-style-type: disc; + } + b, strong { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + > p, > blockquote, > ul, > ol, > dl, > table, > pre, > p { + margin-block: calc(var(--spacing) * 4); + } + > *:first-child { + margin-top: calc(var(--spacing) * 0) !important; + } + > *:last-child { + margin-bottom: calc(var(--spacing) * 0) !important; + } + } + .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) { + position: absolute; + } + @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); } } @property --tw-translate-x { diff --git a/docs/src/components/accordion.njk b/docs/src/components/accordion.njk index a958a47..a01bb3e 100644 --- a/docs/src/components/accordion.njk +++ b/docs/src/components/accordion.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Accordion description: A vertically stacked set of interactive headings that each reveal a section of content. toc: @@ -8,7 +8,6 @@ toc: --- {% from "macros/code_preview.njk" import code_preview %} -{% from "macros/code_block.njk" import code_block %}
{% lucide "circle-alert" %} @@ -68,4 +67,4 @@ toc:

Usage

-

Basecoat animates <details> elements by default. The example above uses Alpine.js to handle the open/close state along with some Tailwind CSS classes.

\ No newline at end of file +

Basecoat animates <details> elements by default. The example above uses Alpine.js to handle the open/close state along with some Tailwind CSS classes.

\ No newline at end of file diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk index 56d8059..ac244fb 100644 --- a/docs/src/components/alert-dialog.njk +++ b/docs/src/components/alert-dialog.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Alert Dialog description: A modal dialog that interrupts the user with important content and expects a response. toc: diff --git a/docs/src/components/alert.njk b/docs/src/components/alert.njk index d6a0ab3..245f624 100644 --- a/docs/src/components/alert.njk +++ b/docs/src/components/alert.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Alert description: Displays a callout for user attention. toc: diff --git a/docs/src/components/avatar.njk b/docs/src/components/avatar.njk index b84c1e3..61687b3 100644 --- a/docs/src/components/avatar.njk +++ b/docs/src/components/avatar.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Avatar description: An image element with a fallback for representing the user. toc: diff --git a/docs/src/components/badge.njk b/docs/src/components/badge.njk index 690fb5f..578fe8d 100644 --- a/docs/src/components/badge.njk +++ b/docs/src/components/badge.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Badge description: Displays a badge or a component that looks like a badge. toc: diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk index fa2dd17..f60ba4c 100644 --- a/docs/src/components/breadcrumb.njk +++ b/docs/src/components/breadcrumb.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Breadcrumb description: Displays the path to the current resource using a hierarchy of links. toc: diff --git a/docs/src/components/button.njk b/docs/src/components/button.njk index 2c674a8..d1b70e1 100644 --- a/docs/src/components/button.njk +++ b/docs/src/components/button.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Button description: Displays a button or a component that looks like a button. toc: diff --git a/docs/src/components/card.njk b/docs/src/components/card.njk index 01ead79..a59a2e0 100644 --- a/docs/src/components/card.njk +++ b/docs/src/components/card.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Card description: Displays a card with header, content, and footer. toc: diff --git a/docs/src/components/checkbox.njk b/docs/src/components/checkbox.njk index 8240972..14fee39 100644 --- a/docs/src/components/checkbox.njk +++ b/docs/src/components/checkbox.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Checkbox description: A control that allows the user to toggle between checked and not checked. toc: diff --git a/docs/src/components/combobox.njk b/docs/src/components/combobox.njk index 5dda31c..36e876b 100644 --- a/docs/src/components/combobox.njk +++ b/docs/src/components/combobox.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Combobox description: Autocomplete input and command palette with a list of suggestions. toc: diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk index e8e3edc..4d466fc 100644 --- a/docs/src/components/dialog.njk +++ b/docs/src/components/dialog.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Dialog description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. toc: diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk index 75ad49f..33f3d2c 100644 --- a/docs/src/components/dropdown-menu.njk +++ b/docs/src/components/dropdown-menu.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Dropdown Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. toc: diff --git a/docs/src/components/form.njk b/docs/src/components/form.njk index e911e73..8c18b81 100644 --- a/docs/src/components/form.njk +++ b/docs/src/components/form.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Input description: Displays a form input field or a component that looks like an input field. toc: diff --git a/docs/src/components/input.njk b/docs/src/components/input.njk index 9e8d0a3..2b0a756 100644 --- a/docs/src/components/input.njk +++ b/docs/src/components/input.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Input description: Displays a form input field or a component that looks like an input field. toc: diff --git a/docs/src/components/label.njk b/docs/src/components/label.njk index 773aa71..b23e74d 100644 --- a/docs/src/components/label.njk +++ b/docs/src/components/label.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Label description: Renders an accessible label associated with controls. toc: diff --git a/docs/src/components/pagination.njk b/docs/src/components/pagination.njk index e98d0a8..206a71c 100644 --- a/docs/src/components/pagination.njk +++ b/docs/src/components/pagination.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Pagination description: Pagination with page navigation, next and previous links. toc: diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk index cdb1176..2a054cc 100644 --- a/docs/src/components/popover.njk +++ b/docs/src/components/popover.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Popover description: Displays rich content in a portal, triggered by a button. toc: diff --git a/docs/src/components/radio-group.njk b/docs/src/components/radio-group.njk index a657d1c..71f4b1f 100644 --- a/docs/src/components/radio-group.njk +++ b/docs/src/components/radio-group.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Radio Group description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. toc: diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk index f7f0059..8239594 100644 --- a/docs/src/components/select.njk +++ b/docs/src/components/select.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Select description: Displays a list of options for the user to pick from—triggered by a button. toc: diff --git a/docs/src/components/skeleton.njk b/docs/src/components/skeleton.njk index 44f853a..e09be8f 100644 --- a/docs/src/components/skeleton.njk +++ b/docs/src/components/skeleton.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Skeleton description: Used to show a placeholder while content is loading. toc: diff --git a/docs/src/components/slider.njk b/docs/src/components/slider.njk index dc8085a..390c1c8 100644 --- a/docs/src/components/slider.njk +++ b/docs/src/components/slider.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Slider description: An input where the user selects a value from within a given range. toc: diff --git a/docs/src/components/switch.njk b/docs/src/components/switch.njk index fe40716..32f86fb 100644 --- a/docs/src/components/switch.njk +++ b/docs/src/components/switch.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Switch description: A control that allows the user to toggle between checked and not checked. toc: diff --git a/docs/src/components/table.njk b/docs/src/components/table.njk index ff9d377..9f1fd1a 100644 --- a/docs/src/components/table.njk +++ b/docs/src/components/table.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Table description: A responsive table component. toc: diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk index b7d1501..722151c 100644 --- a/docs/src/components/tabs.njk +++ b/docs/src/components/tabs.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Tabs description: A set of layered sections of content—known as tab panels—that are displayed one at a time. toc: diff --git a/docs/src/components/textarea.njk b/docs/src/components/textarea.njk index d220ee1..feddb04 100644 --- a/docs/src/components/textarea.njk +++ b/docs/src/components/textarea.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Teaxtarea description: Displays a form textarea or a component that looks like a textarea. toc: diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk index 555be81..c56a335 100644 --- a/docs/src/components/toast.njk +++ b/docs/src/components/toast.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Toast description: A succinct message that is displayed temporarily. --- diff --git a/docs/src/components/tooltip.njk b/docs/src/components/tooltip.njk index c67ef73..4d4f41b 100644 --- a/docs/src/components/tooltip.njk +++ b/docs/src/components/tooltip.njk @@ -1,5 +1,5 @@ --- -layout: layouts/component.njk +layout: layouts/page.njk title: Tooltip description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. toc: diff --git a/docs/src/installation.njk b/docs/src/installation.njk index 1c0c644..fb888b5 100644 --- a/docs/src/installation.njk +++ b/docs/src/installation.njk @@ -2,10 +2,116 @@ layout: layouts/page.njk title: Installation description: How to install Basecoat in your app. +toc: + - label: Installing the CSS + id: install-css + children: + - label: Add Tailwind CSS + id: install-css-tailwind + - label: Add Basecoat + id: install-css-basecoat + - label: Import basecoat in your CSS + id: install-css-import + - label: That's it + id: install-css-done + - label: Components with Javascript code + id: install-js + - label: Use Nunjucks or Jinja macros + id: install-macros --- -

CSS vs. Tailwind

+{% from "macros/code_block.njk" import code_block %} -

HTML & Javascript

+

Installing the CSS

-

Jinja and Nunjucks

+
    +
  1. +

    Add Tailwind CSS

    +
    +

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

    +

    Follow the Tailwind CSS installation instructions to get started.

    +
    +
    2. +
  2. +

    Add Basecoat

    +
    +

    Add Basecoat to your Tailwind CSS file.

    +
    + {% set code %}npm install hunvreus/basecoat{% endset %} + {{ code_block(code, "bash") }} +
    3. +
  3. +

    Import basecoat in your CSS

    + {% set code %}@import "tailwindcss"; +@import "basecoat";{% endset %} + {{ code_block(code, "css") }} +
    4. +
  4. +

    That's it

    +
    +

    You can now use any of the Basecoat classes in your project (e.g. btn, card, input, etc). Read the documentation about each component to get started (e.g. button, card, input, etc).

    +
    +
    5. +
+ +

Components with Javascript code

+ +
+

Some components require Javascript code to work.

+

The documentation provides Alpine.js code snippets to cover that. Make sure to install Alpine.js if you decide to use them.

+

For simple components like Accordion or Slider, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.

+

For more complex components (Dialog, Dropdown Menu, Popover, Select, Tabs and Toast), we provide a separate <script> code snippet that must be included anywhere before the HTML for the component.

+

You are also welcome to write your own Javascript.

+

All of the components try and implement WAI-ARIA standards to make them accessible.

+
+ +

Use Nunjucks or Jinja macros

+ +
+

For more complex components, you can use Nunjucks or Jinja macros to help you generate the HTML and Javascript code.

+

For example, here's how you could use the select() macro to generate the HTML and Javascript code for a Select component:

+ {% set code %}{% raw %}{% call select() %} +
+ Fruits +
Apple
+
Banana
+
Blueberry
+
Grapes
+
Pineapple
+
+{% endcall %}{% endraw %}{% endset %} + {{ code_block(code, "jinja") }} +

You still need to make sure to include the Javascript code, to do so you have two options:

+
    +
  • + Set include_script to true when calling the macro. This will include the <script> code snippet directly before the component's HTML: + {% set code %}{% raw %}{% call select(include_script=true) %} {# Or `True` for Jinja #} +
    + Fruits +
    Apple
    +
    Banana
    +
    Blueberry
    +
    Grapes
    +
    Pineapple
    +
    +{% endcall %}{% endraw %}{% endset %} + {{ code_block(code, "jinja") }} +
    • +
  • + Manually include the <script> code snippet anywhere before the component's HTML. You can use the relevant script partial to do this, for example: + {% set code_script %}{% raw %}{% include "select-script.njk" %} +{% call select() %} +
    + Fruits +
    Apple
    +
    Banana
    +
    Blueberry
    +
    Grapes
    +
    Pineapple
    +
    +{% endcall %}{% endraw %}{% endset %} + {{ code_block(code_script, "jinja") }} +
    • +
+

Documentation for each macro's parameters is available in the source code.

+
diff --git a/docs/styles.css b/docs/styles.css deleted file mode 100644 index 32cf586..0000000 --- a/docs/styles.css +++ /dev/null @@ -1,13 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); - -@import "tailwindcss"; -@source './src/**/*.njk'; - -@import "basecoat"; -@theme { - --font-sans: 'Inter'; - --font-mono: 'JetBrains Mono'; -} - -/* @import "./theme.css"; */ \ No newline at end of file diff --git a/docs/theme.css b/docs/theme.css deleted file mode 100644 index da32abf..0000000 --- a/docs/theme.css +++ /dev/null @@ -1,146 +0,0 @@ -:root { - --background: oklch(0.94 0.02 345.70); - --foreground: oklch(0.47 0 0); - --card: oklch(0.95 0.05 86.89); - --card-foreground: oklch(0.47 0 0); - --popover: oklch(1.00 0 0); - --popover-foreground: oklch(0.47 0 0); - --primary: oklch(0.62 0.18 348.14); - --primary-foreground: oklch(1.00 0 0); - --secondary: oklch(0.81 0.07 198.19); - --secondary-foreground: oklch(0.32 0 0); - --muted: oklch(0.88 0.05 212.10); - --muted-foreground: oklch(0.58 0 0); - --accent: oklch(0.92 0.08 87.67); - --accent-foreground: oklch(0.32 0 0); - --destructive: oklch(0.71 0.17 21.96); - --destructive-foreground: oklch(1.00 0 0); - --border: oklch(0.62 0.18 348.14); - --input: oklch(0.92 0 0); - --ring: oklch(0.70 0.16 350.75); - --chart-1: oklch(0.70 0.16 350.75); - --chart-2: oklch(0.82 0.08 212.09); - --chart-3: oklch(0.92 0.08 87.67); - --chart-4: oklch(0.80 0.11 348.18); - --chart-5: oklch(0.62 0.19 353.91); - --sidebar: oklch(0.91 0.04 343.09); - --sidebar-foreground: oklch(0.32 0 0); - --sidebar-primary: oklch(0.66 0.21 354.31); - --sidebar-primary-foreground: oklch(1.00 0 0); - --sidebar-accent: oklch(0.82 0.11 346.02); - --sidebar-accent-foreground: oklch(0.32 0 0); - --sidebar-border: oklch(0.95 0.03 307.17); - --sidebar-ring: oklch(0.66 0.21 354.31); - --font-sans: Poppins, sans-serif; - --font-serif: Lora, serif; - --font-mono: Fira Code, monospace; - --radius: 0.4rem; - --shadow-2xs: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 0.50); - --shadow-xs: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 0.50); - --shadow-sm: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 1px 2px -1px hsl(325.78 58.18% 56.86% / 1.00); - --shadow: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 1px 2px -1px hsl(325.78 58.18% 56.86% / 1.00); - --shadow-md: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 2px 4px -1px hsl(325.78 58.18% 56.86% / 1.00); - --shadow-lg: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 4px 6px -1px hsl(325.78 58.18% 56.86% / 1.00); - --shadow-xl: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 1.00), 3px 8px 10px -1px hsl(325.78 58.18% 56.86% / 1.00); - --shadow-2xl: 3px 3px 0px 0px hsl(325.78 58.18% 56.86% / 2.50); -} - -.dark { - --background: oklch(0.25 0.03 234.16); - --foreground: oklch(0.93 0.02 349.08); - --card: oklch(0.29 0.03 233.54); - --card-foreground: oklch(0.93 0.02 349.08); - --popover: oklch(0.29 0.03 233.54); - --popover-foreground: oklch(0.93 0.02 349.08); - --primary: oklch(0.92 0.08 87.67); - --primary-foreground: oklch(0.25 0.03 234.16); - --secondary: oklch(0.78 0.08 4.13); - --secondary-foreground: oklch(0.25 0.03 234.16); - --muted: oklch(0.27 0.01 255.58); - --muted-foreground: oklch(0.78 0.08 4.13); - --accent: oklch(0.67 0.10 356.98); - --accent-foreground: oklch(0.93 0.02 349.08); - --destructive: oklch(0.67 0.18 350.36); - --destructive-foreground: oklch(0.25 0.03 234.16); - --border: oklch(0.39 0.04 242.22); - --input: oklch(0.31 0.03 232.00); - --ring: oklch(0.70 0.09 201.87); - --chart-1: oklch(0.70 0.09 201.87); - --chart-2: oklch(0.78 0.08 4.13); - --chart-3: oklch(0.67 0.10 356.98); - --chart-4: oklch(0.44 0.07 217.08); - --chart-5: oklch(0.27 0.01 255.58); - --sidebar: oklch(0.23 0.03 235.97); - --sidebar-foreground: oklch(0.97 0.00 264.54); - --sidebar-primary: oklch(0.66 0.21 354.31); - --sidebar-primary-foreground: oklch(1.00 0 0); - --sidebar-accent: oklch(0.82 0.11 346.02); - --sidebar-accent-foreground: oklch(0.28 0.03 256.85); - --sidebar-border: oklch(0.37 0.03 259.73); - --sidebar-ring: oklch(0.66 0.21 354.31); - --font-sans: Poppins, sans-serif; - --font-serif: Lora, serif; - --font-mono: Fira Code, monospace; - --radius: 0.4rem; - --shadow-2xs: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 0.50); - --shadow-xs: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 0.50); - --shadow-sm: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 1px 2px -1px hsl(206.15 28.06% 27.25% / 1.00); - --shadow: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 1px 2px -1px hsl(206.15 28.06% 27.25% / 1.00); - --shadow-md: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 2px 4px -1px hsl(206.15 28.06% 27.25% / 1.00); - --shadow-lg: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 4px 6px -1px hsl(206.15 28.06% 27.25% / 1.00); - --shadow-xl: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 1.00), 3px 8px 10px -1px hsl(206.15 28.06% 27.25% / 1.00); - --shadow-2xl: 3px 3px 0px 0px hsl(206.15 28.06% 27.25% / 2.50); -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); -} \ No newline at end of file diff --git a/package.json b/package.json index 8a355df..ee9e45e 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,10 @@ }, "homepage": "https://github.com/hunvreus/basecoat#readme", "scripts": { - "css:dev": "tailwindcss -i ./docs/styles.css -o ./docs/src/assets/styles.css --watch", + "css:dev": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch", "eleventy:serve": "eleventy --serve", "dev": "concurrently \"npm:css:dev\" \"npm:eleventy:serve\"", - "build": "tailwindcss -i ./docs/styles.css -o ./docs/src/assets/styles.css --minify && eleventy" + "build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy" }, "devDependencies": { "@11ty/eleventy": "^3.0.0", diff --git a/src/basecoat.css b/src/basecoat.css index 6001f62..e85ced9 100644 --- a/src/basecoat.css +++ b/src/basecoat.css @@ -906,124 +906,4 @@ } } } -} - -/* Prose */ -@layer components { - .prose h1, - .prose h2, - .prose h3, - .prose h4, - .prose h5, - .prose h6, - .h1, - .h2, - .h3, - .h4, - .h5, - .h6 { - @apply font-medium leading-tight; - } - .prose h1, - .h1 { - @apply text-2xl; - } - .prose h2, - .h2 { - @apply text-xl; - } - .prose h3, - .h3 { - @apply text-lg; - } - .prose h4, - .prose h5, - .prose h6, - .h4, - .h5, - .h6 { - @apply text-base; - } - .prose a, - .link { - @apply font-medium underline underline-offset-4; - } - .prose code, - .code { - @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm; - } - .prose pre:has(> code), - .code-block { - @apply bg-muted border-border rounded-md; - } - .prose pre code, - .code-block code { - @apply inline-block p-4 text-sm font-mono; - } - .prose blockquote, - .quote { - @apply border-l-4 border-border pl-4; - } - .prose ol, - .ordered-list { - @apply my-6 ml-6 list-decimal; - - li { - @apply mb-2; - } - } - .prose ul, - .unordered-list { - @apply my-6 ml-6 list-disc; - - li { - @apply mb-2; - } - ul, - ol { - @apply my-2; - } - } - .prose > *:first-child { - @apply !mt-0; - } - .prose > *:last-child { - @apply !mb-0; - } - .prose h1 { - @apply mb-8; - } - .prose h2 { - @apply mt-8 mb-6; - } - .prose h3 { - @apply mt-6 mb-4; - } - .prose h4 { - @apply my-4; - } - .prose h5 { - @apply my-4; - } - .prose h6 { - @apply my-4; - } - .prose > p, - .prose > blockquote, - .prose > ul, - .prose > ol, - .prose > dl, - .prose > table, - .prose > pre, - .prose > p { - @apply my-4; - } - .prose > *:last-child { - @apply !mb-0; - } - - .prose strong, - .prose b { - @apply font-semibold; - } } \ No newline at end of file