From 5dbce039bdee9d2ef36fb5235e1d462447dddcf1 Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 08:05:44 -0700 Subject: [PATCH 01/18] Change collection prop state to status --- docs/src/components/CollectionNavi.astro | 4 ++-- docs/src/content/config.ts | 2 +- docs/src/content/packages/base.mdx | 2 +- docs/src/content/packages/button.mdx | 2 +- docs/src/content/packages/card.mdx | 2 +- docs/src/content/packages/checkbox.mdx | 2 +- docs/src/content/packages/core.mdx | 2 +- docs/src/content/packages/dialog.mdx | 2 +- docs/src/content/packages/drawer.mdx | 2 +- docs/src/content/packages/grid.mdx | 14 +++++--------- docs/src/content/packages/modal.mdx | 2 +- docs/src/content/packages/popover.mdx | 2 +- docs/src/content/packages/radio.mdx | 2 +- docs/src/content/packages/section.mdx | 2 +- docs/src/content/packages/switch.mdx | 2 +- docs/src/content/packages/table.mdx | 2 +- docs/src/content/packages/utility.mdx | 2 +- packages/modal/src/js/register.js | 2 +- packages/popover/src/js/register.js | 2 +- 19 files changed, 24 insertions(+), 28 deletions(-) diff --git a/docs/src/components/CollectionNavi.astro b/docs/src/components/CollectionNavi.astro index cf4ac13d9..7f9a39cb4 100644 --- a/docs/src/components/CollectionNavi.astro +++ b/docs/src/components/CollectionNavi.astro @@ -38,8 +38,8 @@ const cp = currentPage(new URL(Astro.request.url).pathname, { > {entry.data.title} { - entry.data.state && ( - + entry.data.status && ( + ) } diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts index 625ca6b6c..3685ce00b 100644 --- a/docs/src/content/config.ts +++ b/docs/src/content/config.ts @@ -7,7 +7,7 @@ const packages = defineCollection({ title: z.string(), description: z.string(), package: z.string(), - state: z.string().optional(), + status: z.string().optional(), }), }); diff --git a/docs/src/content/packages/base.mdx b/docs/src/content/packages/base.mdx index c01915c99..dc2da5e30 100644 --- a/docs/src/content/packages/base.mdx +++ b/docs/src/content/packages/base.mdx @@ -2,7 +2,7 @@ title: Base description: "Includes useful default styles and base modules for common HTML elements." package: "@vrembem/base" -state: "layers" +status: "layers" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/button.mdx b/docs/src/content/packages/button.mdx index c7899d192..3c2095bf0 100644 --- a/docs/src/content/packages/button.mdx +++ b/docs/src/content/packages/button.mdx @@ -2,7 +2,7 @@ title: Button description: "Buttons are a simple component that allow users to take actions." package: "@vrembem/button" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/card.mdx b/docs/src/content/packages/card.mdx index fb834ccab..2d2db68dd 100644 --- a/docs/src/content/packages/card.mdx +++ b/docs/src/content/packages/card.mdx @@ -2,7 +2,7 @@ title: Card description: "The card component provides a flexible and highly composable content container." package: "@vrembem/card" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/checkbox.mdx b/docs/src/content/packages/checkbox.mdx index 094d342df..223a8a4b3 100644 --- a/docs/src/content/packages/checkbox.mdx +++ b/docs/src/content/packages/checkbox.mdx @@ -2,7 +2,7 @@ title: Checkbox description: "Checkboxes allow the user to select multiple options from a set." package: "@vrembem/checkbox" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/core.mdx b/docs/src/content/packages/core.mdx index 6f35a17d4..dddc96677 100644 --- a/docs/src/content/packages/core.mdx +++ b/docs/src/content/packages/core.mdx @@ -2,7 +2,7 @@ title: Core description: "Shared variables, functions and mixins for Vrembem components." package: "@vrembem/core" -state: "settings" +status: "settings" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/dialog.mdx b/docs/src/content/packages/dialog.mdx index 773ac46f2..cf0d65d35 100644 --- a/docs/src/content/packages/dialog.mdx +++ b/docs/src/content/packages/dialog.mdx @@ -2,7 +2,7 @@ title: Dialog description: "A component that facilitates a conversation between the system and the user. They often request information or an action from the user." package: "@vrembem/dialog" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/drawer.mdx b/docs/src/content/packages/drawer.mdx index af11f2903..00471f3f5 100644 --- a/docs/src/content/packages/drawer.mdx +++ b/docs/src/content/packages/drawer.mdx @@ -2,7 +2,7 @@ title: Drawer description: "A container component that slides in from the left or right. Typically containing menus, search or other content." package: "@vrembem/drawer" -state: "circle" +status: "circle" --- import CodeExample from "../../components/CodeExample.astro"; diff --git a/docs/src/content/packages/grid.mdx b/docs/src/content/packages/grid.mdx index 817a9d068..1acd61ba9 100644 --- a/docs/src/content/packages/grid.mdx +++ b/docs/src/content/packages/grid.mdx @@ -2,29 +2,25 @@ title: Grid description: "A flexbox based grid system component." package: "@vrembem/grid" +status: "loader" --- +import CodeExample from '../../components/CodeExample.astro'; +import DocBlock from '../../components/DocBlock.astro'; + # Grid A flexbox based grid system component. -[![npm version](https://img.shields.io/npm/v/%40vrembem%2Fgrid.svg)](https://www.npmjs.com/package/%40vrembem%2Fgrid) - -[Documentation](https://vrembem.com/packages/grid) - -## Installation - ```sh npm install @vrembem/grid ``` -### Styles - ```scss @use "@vrembem/grid"; ``` -### Markup +## Basic usage The most basic implementation of the grid component consists of two elements. By default, `grid__item`'s split the available space within the `grid` parent evenly: diff --git a/docs/src/content/packages/modal.mdx b/docs/src/content/packages/modal.mdx index 8724099b6..efb042690 100644 --- a/docs/src/content/packages/modal.mdx +++ b/docs/src/content/packages/modal.mdx @@ -2,7 +2,7 @@ title: Modal description: "A component for changing the mode of a page to complete a critical task. This is usually used in conjunction with the dialog component to make modal dialogs." package: "@vrembem/modal" -state: "circle" +status: "circle" --- import CodeExample from "../../components/CodeExample.astro"; diff --git a/docs/src/content/packages/popover.mdx b/docs/src/content/packages/popover.mdx index 9c25beaef..fa72176f0 100644 --- a/docs/src/content/packages/popover.mdx +++ b/docs/src/content/packages/popover.mdx @@ -2,7 +2,7 @@ title: Popover description: "A component that is initially hidden and revealed upon user interaction either through a click or hover event. Popover can contain lists of actions, links, or additional supplementary content." package: "@vrembem/popover" -state: "circle" +status: "circle" --- import CodeExample from "../../components/CodeExample.astro"; diff --git a/docs/src/content/packages/radio.mdx b/docs/src/content/packages/radio.mdx index 68167afff..0ce419e9d 100644 --- a/docs/src/content/packages/radio.mdx +++ b/docs/src/content/packages/radio.mdx @@ -2,7 +2,7 @@ title: Radio description: "Radios allow the user to select a single option from a set." package: "@vrembem/radio" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/section.mdx b/docs/src/content/packages/section.mdx index 0eafe2ba7..20bcba8f2 100644 --- a/docs/src/content/packages/section.mdx +++ b/docs/src/content/packages/section.mdx @@ -2,7 +2,7 @@ title: Section description: "A container component for wrapping distinct sections of a page." package: "@vrembem/section" -state: "check" +status: "check" --- import CodeExample from "../../components/CodeExample.astro"; diff --git a/docs/src/content/packages/switch.mdx b/docs/src/content/packages/switch.mdx index d09010cfd..4d4237b96 100644 --- a/docs/src/content/packages/switch.mdx +++ b/docs/src/content/packages/switch.mdx @@ -2,7 +2,7 @@ title: Switch description: "Switches are a binary form element used to toggle between two options." package: "@vrembem/switch" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/table.mdx b/docs/src/content/packages/table.mdx index 147588592..cfa52e1a3 100644 --- a/docs/src/content/packages/table.mdx +++ b/docs/src/content/packages/table.mdx @@ -2,7 +2,7 @@ title: Table description: "A table component for displaying HTML tables." package: "@vrembem/table" -state: "check" +status: "check" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/docs/src/content/packages/utility.mdx b/docs/src/content/packages/utility.mdx index 786de5769..23ed09f38 100644 --- a/docs/src/content/packages/utility.mdx +++ b/docs/src/content/packages/utility.mdx @@ -2,7 +2,7 @@ title: Utility description: "The utility component provides a set of atomic classes that specialize in a single function." package: "@vrembem/utility" -state: "layers" +status: "layers" --- import CodeExample from '../../components/CodeExample.astro'; diff --git a/packages/modal/src/js/register.js b/packages/modal/src/js/register.js index 6ac2e20d9..bcff0fadf 100644 --- a/packages/modal/src/js/register.js +++ b/packages/modal/src/js/register.js @@ -15,7 +15,7 @@ export async function register(el, config = {}) { // Setup the modal object. const entry = { id: el.id, - state: "closed", + status: "closed", el: el, dialog: null, get required() { diff --git a/packages/popover/src/js/register.js b/packages/popover/src/js/register.js index 4b1c0e975..7b44c3acb 100644 --- a/packages/popover/src/js/register.js +++ b/packages/popover/src/js/register.js @@ -16,7 +16,7 @@ export async function register(el, trigger) { // Setup the popover object. const entry = { id: el.id, - state: "closed", + status: "closed", el: el, trigger: trigger, popper: createPopper(trigger, el), From b3d80b67238284af8e3aff3223dd04e7860e7c1b Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 08:14:53 -0700 Subject: [PATCH 02/18] Update grid headings and add DocBlock for vars --- docs/src/content/packages/grid.mdx | 80 ++++++++++-------------------- 1 file changed, 26 insertions(+), 54 deletions(-) diff --git a/docs/src/content/packages/grid.mdx b/docs/src/content/packages/grid.mdx index 1acd61ba9..4a8f927e9 100644 --- a/docs/src/content/packages/grid.mdx +++ b/docs/src/content/packages/grid.mdx @@ -37,7 +37,7 @@ The most basic implementation of the grid component consists of two elements. By > Grid is a flex based layout component. That means you can use the [`@vremben/utility`](https://github.com/sebnitu/vrembem/tree/main/packages/utility) package—specifically [`flex`](https://github.com/sebnitu/vrembem/tree/main/packages/utility#flex) and [`span`](https://github.com/sebnitu/vrembem/tree/main/packages/utility#span) modules—to further customize your layout. -#### `grid__clear` +### grid__clear The clear element allows you to start a new row at any point in a column set. @@ -50,9 +50,7 @@ The clear element allows you to start a new row at any point in a column set. ``` -## Modifiers - -### `grid_auto` +## grid_auto Gives grid items a basis of auto so their content dictates their width. @@ -72,7 +70,7 @@ Set an individual grid item to auto using `grid__item_auto` element modifier. ``` -### `grid_fill` +## grid_fill The fill modifier stretches grid item’s contents to fill the height of it’s container. @@ -92,7 +90,7 @@ Set an individual grid item to fill using the `grid__item_fill` element modifier ``` -### `grid_gap_[key]` +## grid_gap_[key] Modifiers that adjust the gutter spacing between `grid__item` elements. Gap key output is based on the values in [`$gap-map`](#gap-scale) variable map. @@ -103,7 +101,7 @@ Modifiers that adjust the gutter spacing between `grid__item` elements. Gap key ``` -#### Available Variations +**Available Variants** - `grid_gap_none` - `grid_gap_xs` @@ -112,7 +110,7 @@ Modifiers that adjust the gutter spacing between `grid__item` elements. Gap key - `grid_gap_lg` - `grid_gap_xl` -### `grid_gap-x_[key]` +## grid_gap-x_[key] Adjusts the horizontal gap spacing based on the provided key. Gap key output is based on the values in [`$gap-map`](#gap-scale) variable map. @@ -123,7 +121,7 @@ Adjusts the horizontal gap spacing based on the provided key. Gap key output is ``` -#### Available Variations +**Available Variants** - `grid_gap-x_none` - `grid_gap-x_xs` @@ -132,7 +130,7 @@ Adjusts the horizontal gap spacing based on the provided key. Gap key output is - `grid_gap-x_lg` - `grid_gap-x_xl` -### `grid_gap-y_[key]` +## grid_gap-y_[key] Adjusts the vertical gap spacing based on the provided key. Gap key output is based on the values in [`$gap-map`](#gap-scale) variable map. @@ -143,7 +141,7 @@ Adjusts the vertical gap spacing based on the provided key. Gap key output is ba ``` -#### Available Variations +**Available Variants** - `grid_gap-y_none` - `grid_gap-y_xs` @@ -152,7 +150,7 @@ Adjusts the vertical gap spacing based on the provided key. Gap key output is ba - `grid_gap-y_lg` - `grid_gap-y_xl` -### `grid_stack_[key]` +## grid_stack_[key] Adds a breakpoint for when grid items should be stacked vertically. Values and class keys are generated using the [`$breakpoints`](#breakpoints) map. Omitting the key value from the modifier (e.g. `grid_stack`) will stack items under all conditions. @@ -163,7 +161,7 @@ Adds a breakpoint for when grid items should be stacked vertically. Values and c ``` -#### Available Variations +**Available Variants** - `grid_stack` - `grid_stack_xs` @@ -172,7 +170,7 @@ Adds a breakpoint for when grid items should be stacked vertically. Values and c - `grid_stack_lg` - `grid_stack_xl` -### `span` +## span Set the flex-basis, width and max-width on an element using the `span` module. Span column widths are built from the `$span-columns` variable. Breakpoint keys are built from the [`$breakpoints`](#breakpoints) variable map. These are the available variants: @@ -187,7 +185,7 @@ Set the flex-basis, width and max-width on an element using the `span` module. S | `$prefix-span` | `null` | String to prefix the span module with. | | `$span-columns` | `12` | The columns value to use when building span variants. | -#### `span-[col]-[key]` +### span-[col]-[key] Sets the number of columns an element should span with an optional breakpoint condition. The total number of columns is set in the `$span-columns` variable. Breakpoint keys are built from the [`$breakpoints`](#breakpoints) variable map. @@ -213,7 +211,7 @@ Here's an example of using the optional breakpoint variants. Breakpoints variant ``` -#### `span-auto-[key]` +### span-auto-[key] Sets an elements width to `auto` with an optional breakpoint condition. @@ -225,7 +223,7 @@ Sets an elements width to `auto` with an optional breakpoint condition. ``` -#### `span-full-[key]` +### span-full-[key] Sets an elements width to `100%` with an optional breakpoint condition. @@ -239,44 +237,18 @@ Sets an elements width to `100%` with an optional breakpoint condition. ## Customization -### Sass Variables - -| Variable | Default | Description | -| ------------------------ | ---------------------------------------------- | ----------------------------------------------------------------------------- | -| `$prefix-block` | `null` | String to prefix blocks with. | -| `$prefix-element` | `"__"` | String to prefix elements with. | -| `$prefix-modifier` | `"_"` | String to prefix modifiers with. | -| `$prefix-modifier-value` | `"_"` | String to prefix modifier values with. | -| `$breakpoints` | [`core.$breakpoints` Ref ↓](#breakpoints) | The breakpoints map the `grid_stack_[key]` modifier uses to build its styles. | -| `$gap` | `2em` | The default gap spacing for the grid component. | -| `$gap-map` | [`Sass Map` Ref ↓](#gap-scale) | Used to output gap modifiers. | - -#### `$breakpoints` - -The breakpoints map the `grid_stack_[key]` modifier uses to build its styles. +Grids are primarily customized using CSS variables but can also be modified using Sass variables. All CSS variables are given the Vrembem vendor prefix `"vb-"`. This can be changed by setting the `$prefix-variable` variable via the `core` module. -```scss -// Inherited from: core.$breakpoints -$breakpoints: ( - "xs": 480px, - "sm": 620px, - "md": 760px, - "lg": 990px, - "xl": 1380px -) !default; -``` + -#### `$gap-map` + ```scss + // TBD + ``` + -Used to output gap modifiers. + -```scss -$gap-map: ( - "none": 0, - "xs": 0.5em, - "sm": 1em, - "md": 2em, - "lg": 3em, - "xl": 4em -) !default; -``` + ```scss + // TBD + ``` + From 0e3fefcae9162cb01c48769695fa62bd29ad8f52 Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 08:33:44 -0700 Subject: [PATCH 03/18] Apply bem function for grid selectors and remove local prefixes --- docs/src/content/packages/grid.mdx | 8 +++++--- packages/grid/src/_grid.scss | 9 +++------ packages/grid/src/_grid_auto.scss | 10 +++------- packages/grid/src/_grid_fill.scss | 10 +++------- packages/grid/src/_grid_gap.scss | 11 +++-------- packages/grid/src/_grid_stack.scss | 15 +++++---------- packages/grid/src/_variables.scss | 5 ----- 7 files changed, 22 insertions(+), 46 deletions(-) diff --git a/docs/src/content/packages/grid.mdx b/docs/src/content/packages/grid.mdx index 4a8f927e9..07361fb08 100644 --- a/docs/src/content/packages/grid.mdx +++ b/docs/src/content/packages/grid.mdx @@ -16,9 +16,11 @@ A flexbox based grid system component. npm install @vrembem/grid ``` -```scss -@use "@vrembem/grid"; -``` + + ```scss + @use "@vrembem/grid"; + ``` + ## Basic usage diff --git a/packages/grid/src/_grid.scss b/packages/grid/src/_grid.scss index 5fcc8e557..0472f9752 100644 --- a/packages/grid/src/_grid.scss +++ b/packages/grid/src/_grid.scss @@ -1,10 +1,7 @@ @use "@vrembem/core"; @use "./variables" as var; -$_b: var.$prefix-block; -$_e: var.$prefix-element; - -.#{$_b}grid { +#{core.bem("grid")} { @include core.flex-gap(var.$gap, $prop: "padding"); display: flex; flex-wrap: wrap; @@ -14,12 +11,12 @@ $_e: var.$prefix-element; } } -.#{$_b}grid#{$_e}item { +#{core.bem("grid", "item")} { flex: 1 1 0; max-width: 100%; } -.#{$_b}grid#{$_e}clear { +#{core.bem("grid", "clear")} { flex: 1 0 100%; margin: 0 !important; padding: 0 !important; diff --git a/packages/grid/src/_grid_auto.scss b/packages/grid/src/_grid_auto.scss index 3fb0b11a1..be2fb4338 100644 --- a/packages/grid/src/_grid_auto.scss +++ b/packages/grid/src/_grid_auto.scss @@ -1,10 +1,6 @@ -@use "./variables" as var; +@use "@vrembem/core"; -$_b: var.$prefix-block; -$_e: var.$prefix-element; -$_m: var.$prefix-modifier; - -.#{$_b}grid#{$_m}auto > .#{$_b}grid#{$_e}item, -.#{$_b}grid#{$_e}item#{$_m}auto { +#{core.bem("grid", null, "auto")} > #{core.bem("grid", "item")}, +#{core.bem("grid", "item", "auto")} { flex: 0 0 auto; } diff --git a/packages/grid/src/_grid_fill.scss b/packages/grid/src/_grid_fill.scss index 333bb2b9c..80a87331b 100644 --- a/packages/grid/src/_grid_fill.scss +++ b/packages/grid/src/_grid_fill.scss @@ -1,11 +1,7 @@ -@use "./variables" as var; +@use "@vrembem/core"; -$_b: var.$prefix-block; -$_e: var.$prefix-element; -$_m: var.$prefix-modifier; - -.#{$_b}grid#{$_m}fill > .#{$_b}grid#{$_e}item, -.#{$_b}grid#{$_e}item#{$_m}fill { +#{core.bem("grid", null, "fill")} > #{core.bem("grid", "item")}, +#{core.bem("grid", "item", "fill")} { display: flex; flex-direction: column; diff --git a/packages/grid/src/_grid_gap.scss b/packages/grid/src/_grid_gap.scss index 88738cd3f..0ddbbe6a2 100644 --- a/packages/grid/src/_grid_gap.scss +++ b/packages/grid/src/_grid_gap.scss @@ -1,23 +1,18 @@ @use "@vrembem/core"; @use "./variables" as var; -$_b: var.$prefix-block; -$_e: var.$prefix-element; -$_m: var.$prefix-modifier; -$_v: var.$prefix-modifier-value; - @each $key, $value in var.$gap-map { - .#{$_b}grid#{$_m}gap#{$_v}#{$key} { + #{core.bem("grid", null, "gap", $key)} { @include core.flex-gap($value, $prop: "padding"); } } @each $key, $value in var.$gap-map { - .#{$_b}grid#{$_m}gap-x#{$_v}#{$key} { + #{core.bem("grid", null, "gap-x", $key)} { @include core.flex-gap($value, "x", $prop: "padding"); } - .#{$_b}grid#{$_m}gap-y#{$_v}#{$key} { + #{core.bem("grid", null, "gap-y", $key)} { @include core.flex-gap($value, "y", $prop: "padding"); } } diff --git a/packages/grid/src/_grid_stack.scss b/packages/grid/src/_grid_stack.scss index 2f2a662ba..400f86764 100644 --- a/packages/grid/src/_grid_stack.scss +++ b/packages/grid/src/_grid_stack.scss @@ -1,33 +1,28 @@ @use "@vrembem/core"; @use "./variables" as var; -$_b: var.$prefix-block; -$_e: var.$prefix-element; -$_m: var.$prefix-modifier; -$_v: var.$prefix-modifier-value; - -.#{$_b}grid#{$_m}stack { +#{core.bem("grid", null, "stack")} { flex-direction: column; - > .#{$_b}grid#{$_e}item { + > #{core.bem("grid", "item")} { flex: none; width: 100%; } } @each $key, $value in var.$breakpoints { - .#{$_b}grid#{$_m}stack#{$_v}#{$key} { + #{core.bem("grid", null, "stack", $key)} { flex-direction: column; } @include core.media-min($value) { - .#{$_b}grid#{$_m}stack#{$_v}#{$key} { + #{core.bem("grid", null, "stack", $key)} { flex-direction: row; } } @include core.media-max($value) { - .#{$_b}grid#{$_m}stack#{$_v}#{$key} > .#{$_b}grid#{$_e}item { + #{core.bem("grid", null, "stack", $key)} > #{core.bem("grid", "item")} { flex: none; width: 100%; } diff --git a/packages/grid/src/_variables.scss b/packages/grid/src/_variables.scss index 3a55e7be8..0488cc676 100644 --- a/packages/grid/src/_variables.scss +++ b/packages/grid/src/_variables.scss @@ -1,10 +1,5 @@ @use "@vrembem/core"; -$prefix-block: core.$prefix-block !default; -$prefix-element: core.$prefix-element !default; -$prefix-modifier: core.$prefix-modifier !default; -$prefix-modifier-value: core.$prefix-modifier-value !default; - $breakpoints: core.$breakpoints !default; $gap: 2em !default; $gap-map: ( From 7864715033e207455637d194a31f7dffd325cb5b Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 08:47:28 -0700 Subject: [PATCH 04/18] Clean up span variables --- packages/grid/src/_span.scss | 29 +++++++++++++---------------- packages/grid/src/_variables.scss | 6 ++---- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/grid/src/_span.scss b/packages/grid/src/_span.scss index dbf96aeb8..bf55b29f3 100644 --- a/packages/grid/src/_span.scss +++ b/packages/grid/src/_span.scss @@ -2,39 +2,36 @@ @use "@vrembem/core"; @use "./variables" as var; -$_p: var.$prefix-span; -$_c: var.$class-span; - -@if (var.$output-span) { - .#{$_p}#{$_c}-auto { +@if (var.$span and var.$span != 0) { + .#{var.$span-class}-auto { flex: 0 0 auto; } - @for $i from 1 through var.$span-columns { - $_s: ".#{$_p}#{$_c}-#{$i}"; - @if ($i == var.$span-columns) { - $_s: "#{$_s}, .#{$_p}#{$_c}-full"; + @for $i from 1 through var.$span { + $_s: ".#{var.$span-class}-#{$i}"; + @if ($i == var.$span) { + $_s: "#{$_s}, .#{var.$span-class}-full"; } #{$_s} { flex: none; - width: (100% * (math.div($i, var.$span-columns))); + width: (100% * (math.div($i, var.$span))); } } @each $key, $value in var.$breakpoints { @include core.media-min($value) { - .#{$_p}#{$_c}-auto-#{$key} { + .#{var.$span-class}-auto-#{$key} { flex: 0 0 auto; } - @for $i from 1 through var.$span-columns { - $_s: ".#{$_p}#{$_c}-#{$i}-#{$key}"; - @if ($i == var.$span-columns) { - $_s: "#{$_s}, .#{$_p}#{$_c}-full-#{$key}"; + @for $i from 1 through var.$span { + $_s: ".#{var.$span-class}-#{$i}-#{$key}"; + @if ($i == var.$span) { + $_s: "#{$_s}, .#{var.$span-class}-full-#{$key}"; } #{$_s} { flex: none; - width: (100% * (math.div($i, var.$span-columns))); + width: (100% * (math.div($i, var.$span))); } } } diff --git a/packages/grid/src/_variables.scss b/packages/grid/src/_variables.scss index 0488cc676..7051ff3c2 100644 --- a/packages/grid/src/_variables.scss +++ b/packages/grid/src/_variables.scss @@ -11,7 +11,5 @@ $gap-map: ( "xl": 4em ) !default; -$output-span: true !default; -$class-span: "span" !default; -$prefix-span: null !default; -$span-columns: 12 !default; +$span: 12 !default; +$span-class: "span" !default; From 97b3f9c8c06faf32ba76e686044bdf97d5489326 Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 09:15:13 -0700 Subject: [PATCH 05/18] Update the use of state to status in getPackages --- docs/src/content/packages/grid.mdx | 2 +- docs/src/modules/getPackages.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/content/packages/grid.mdx b/docs/src/content/packages/grid.mdx index 07361fb08..0f358eb10 100644 --- a/docs/src/content/packages/grid.mdx +++ b/docs/src/content/packages/grid.mdx @@ -37,7 +37,7 @@ The most basic implementation of the grid component consists of two elements. By ``` -> Grid is a flex based layout component. That means you can use the [`@vremben/utility`](https://github.com/sebnitu/vrembem/tree/main/packages/utility) package—specifically [`flex`](https://github.com/sebnitu/vrembem/tree/main/packages/utility#flex) and [`span`](https://github.com/sebnitu/vrembem/tree/main/packages/utility#span) modules—to further customize your layout. +> Grid is a flex based layout component. Use flex utilities from [`@vremben/utility`](/packages/utility) to further customize your layout. ### grid__clear diff --git a/docs/src/modules/getPackages.js b/docs/src/modules/getPackages.js index cfaa08c28..84c0b400f 100644 --- a/docs/src/modules/getPackages.js +++ b/docs/src/modules/getPackages.js @@ -1,7 +1,7 @@ import { getCollection } from "astro:content"; function packageOrder(a, b) { - return a.data.state == "settings" ? -1 : b.data.state == "settings" ? 1 : (a.data.state == "layers" ? -1 : b.data.state == "layers" ? 1 : 0); + return a.data.status == "settings" ? -1 : b.data.status == "settings" ? 1 : (a.data.status == "layers" ? -1 : b.data.status == "layers" ? 1 : 0); } export async function getPackages() { From 3ea302552ae4b54469eb5ac2395f24e19266351b Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 7 Jun 2024 09:29:23 -0700 Subject: [PATCH 06/18] Add styles for code elements inside a link --- packages/base/src/_mixins.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/base/src/_mixins.scss b/packages/base/src/_mixins.scss index 3e4a3dc04..2bb8e01e3 100644 --- a/packages/base/src/_mixins.scss +++ b/packages/base/src/_mixins.scss @@ -2,6 +2,7 @@ @use "sass:map"; @use "sass:meta"; @use "@vrembem/core"; +@use "@vrembem/core/palette"; @use "./variables" as var; // Arrow @@ -133,9 +134,18 @@ text-decoration-thickness: var.$link-decoration-thickness; text-underline-offset: var.$link-underline-offset; + code { + color: var.$link-color; + background-color: palette.get("primary", 50%, 10%); + } + &:hover { color: var.$link-color-hover; text-decoration: var.$link-decoration-hover; + + code { + color: var.$link-color-hover; + } } &:focus { @@ -143,6 +153,10 @@ outline-offset: var.$link-outline-focus-offset; color: var.$link-color-hover; text-decoration: var.$link-decoration-hover; + + code { + color: var.$link-color-hover; + } } } From f97b706536c6a33f7e99572020da0dec8e3a828c Mon Sep 17 00:00:00 2001 From: sebnitu Date: Sat, 8 Jun 2024 09:05:17 -0700 Subject: [PATCH 07/18] Fix linting --- packages/base/src/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base/src/_mixins.scss b/packages/base/src/_mixins.scss index 2bb8e01e3..36f266f3f 100644 --- a/packages/base/src/_mixins.scss +++ b/packages/base/src/_mixins.scss @@ -135,8 +135,8 @@ text-underline-offset: var.$link-underline-offset; code { - color: var.$link-color; background-color: palette.get("primary", 50%, 10%); + color: var.$link-color; } &:hover { From 37f957c4e79d1b9391fd6e137a96725afe82c345 Mon Sep 17 00:00:00 2001 From: sebnitu Date: Sat, 8 Jun 2024 09:19:39 -0700 Subject: [PATCH 08/18] Revert modal and popover register state change --- packages/modal/src/js/register.js | 2 +- packages/popover/src/js/register.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/modal/src/js/register.js b/packages/modal/src/js/register.js index bcff0fadf..6ac2e20d9 100644 --- a/packages/modal/src/js/register.js +++ b/packages/modal/src/js/register.js @@ -15,7 +15,7 @@ export async function register(el, config = {}) { // Setup the modal object. const entry = { id: el.id, - status: "closed", + state: "closed", el: el, dialog: null, get required() { diff --git a/packages/popover/src/js/register.js b/packages/popover/src/js/register.js index 7b44c3acb..4b1c0e975 100644 --- a/packages/popover/src/js/register.js +++ b/packages/popover/src/js/register.js @@ -16,7 +16,7 @@ export async function register(el, trigger) { // Setup the popover object. const entry = { id: el.id, - status: "closed", + state: "closed", el: el, trigger: trigger, popper: createPopper(trigger, el), From bd23fe7f611e0ceaa564ecd4365a93829d47064b Mon Sep 17 00:00:00 2001 From: sebnitu Date: Sat, 8 Jun 2024 09:22:26 -0700 Subject: [PATCH 09/18] Remove lang=html from CodeExample calls since its the default --- docs/src/content/packages/card.mdx | 8 ++++---- docs/src/content/packages/checkbox.mdx | 4 ++-- docs/src/content/packages/dialog.mdx | 4 ++-- docs/src/content/packages/drawer.mdx | 14 +++++++------- docs/src/content/packages/modal.mdx | 14 +++++++------- docs/src/content/packages/radio.mdx | 6 +++--- docs/src/content/packages/section.mdx | 6 +++--- docs/src/content/packages/switch.mdx | 6 +++--- docs/src/content/packages/table.mdx | 8 ++++---- docs/src/content/packages/utility.mdx | 2 +- 10 files changed, 36 insertions(+), 36 deletions(-) diff --git a/docs/src/content/packages/card.mdx b/docs/src/content/packages/card.mdx index 2d2db68dd..2e2210e6d 100644 --- a/docs/src/content/packages/card.mdx +++ b/docs/src/content/packages/card.mdx @@ -31,7 +31,7 @@ Cards are a highly composable container component that comes with a variety of e - `card__image` - `card__title` - +
@@ -57,7 +57,7 @@ For creating more distinct sections in a card, header and footer elements can be - `card__header` - `card__footer` - +
@@ -98,7 +98,7 @@ Card screens and backgrounds are displayed behind other card elements. These can - `card__screen` - `card__background` - +
@@ -132,7 +132,7 @@ Card screens and backgrounds are displayed behind other card elements. These can When creating a card using the `` element, additional styles are applied to make the card more visually interactive with hover and focus styles. - +
diff --git a/docs/src/content/packages/checkbox.mdx b/docs/src/content/packages/checkbox.mdx index 223a8a4b3..6d860999b 100644 --- a/docs/src/content/packages/checkbox.mdx +++ b/docs/src/content/packages/checkbox.mdx @@ -85,7 +85,7 @@ Indeterminate checkboxes need to be set in JavaScript though styling is provided For checkboxes with labels, wrap the checkbox component along with the text label using the `