beathers 5.6.2 → 5.6.3

package/docs/colors.md

@@ -0,0 +1,250 @@
+# Colors Documentation
+
+> Simple guide to using color utilities in Beathers CSS framework
+
+## Table of Contents
+
+- [Text Colors](#text-colors)
+- [Background Colors](#background-colors)
+- [Border Colors](#border-colors)
+- [Color Opacity](#color-opacity)
+- [Special Utilities](#special-utilities)
+
+---
+
+## Text Colors
+
+### Normal State
+
+```html
+<p class="color-main">Main color text</p>
+<p class="color-primary">Primary color text</p>
+```
+
+### Pseudo State
+
+```html
+<p class="color-main:hover">Hover text color</p>
+<p class="color-primary:focus">Focus text color</p>
+
+<input class="color-main:placeholder" placeholder="Placeholder color" />
+```
+
+### Current Color
+
+```html
+<div class="color-primary">
+  <span class="current-color">Inherits parent text color</span>
+</div>
+```
+
+### Dark/Light Mode
+
+```html
+<!-- Context method -->
+<div class="light">
+  <p class="color-main">Light theme text</p>
+</div>
+
+<!-- Direct method -->
+<p class="color-main light">Light text</p>
+<p class="color-main dark">Dark text</p>
+
+<!-- Utility-first -->
+<p class="light:color-main">Light only</p>
+<p class="dark:color-main">Dark only</p>
+```
+
+### CSS Integration
+
+```css
+.custom-text {
+  color: var(--color-main-light);
+}
+.dark .custom-text {
+  color: var(--color-main-dark);
+}
+```
+
+### SCSS Integration
+
+```scss
+@use 'beathers/scss/functions/colors' as colors;
+
+.custom-text {
+  @include colors.useColor('main', color);
+}
+```
+
+---
+
+## Background Colors
+
+### Normal State
+
+```html
+<div class="bg:color-main">Main background</div>
+<div class="bg:color-primary">Primary background</div>
+```
+
+### Pseudo State
+
+```html
+<button class="bg:color-main:hover">Hover background</button>
+<input class="bg:color-primary:focus">Focus background</input>
+```
+
+### Current Color
+
+```html
+<div class="color-primary">
+  <span class="bg:current-color">Background matches text color</span>
+</div>
+```
+
+### Dark/Light Mode
+
+```html
+<div class="bg:color-main light">Light background</div>
+<div class="bg:color-main dark">Dark background</div>
+<div class="light:bg:color-main">Light only background</div>
+```
+
+### CSS Integration
+
+```css
+.custom-bg {
+  background-color: var(--color-main-light);
+}
+.dark .custom-bg {
+  background-color: var(--color-main-dark);
+}
+```
+
+### SCSS Integration
+
+```scss
+@use 'beathers/scss/functions/colors' as colors;
+
+.custom-bg {
+  @include colors.useColor('main', background-color);
+}
+```
+
+---
+
+## Border Colors
+
+### Normal State
+
+```html
+<div class="border:color-main">Main border</div>
+<div class="border:color-primary">Primary border</div>
+```
+
+### Pseudo State
+
+```html
+<input class="border:color-main:hover">Hover border</input>
+<input class="border:color-primary:focus">Focus border</input>
+```
+
+### Current Color
+
+```html
+<div class="color-primary">
+  <div class="border:current-color">Border matches text color</div>
+</div>
+```
+
+### Dark/Light Mode
+
+```html
+<div class="border:color-main light">Light border</div>
+<div class="border:color-main dark">Dark border</div>
+<div class="light:border:color-main">Light only border</div>
+```
+
+### CSS Integration
+
+```css
+.custom-border {
+  border-color: var(--color-main-light);
+}
+.dark .custom-border {
+  border-color: var(--color-main-dark);
+}
+```
+
+### SCSS Integration
+
+```scss
+@use 'beathers/scss/functions/colors' as colors;
+
+.custom-border {
+  @include colors.useColor('main', border-color);
+}
+```
+
+---
+
+## Color Opacity
+
+### Normal State
+
+```html
+<p class="color-main:25">25% opacity text</p>
+<div class="bg:color-primary:50">50% opacity background</div>
+<div class="border:color-main:70">70% opacity border</div>
+```
+
+### Pseudo State
+
+```html
+<p class="color-main:50:hover">Hover with opacity</p>
+<button class="bg:color-primary:25:focus">Focus with opacity</button>
+```
+
+### Dark/Light Mode
+
+```html
+<p class="color-main:50 light">Light theme with opacity</p>
+<p class="dark:color-main:25">Dark theme with opacity</p>
+```
+
+### CSS Integration
+
+```css
+.custom-opacity {
+  color: rgba(var(--color-main-light-rgb), 0.5);
+}
+```
+
+### SCSS Integration
+
+```scss
+@use 'beathers/scss/functions/colors' as colors;
+
+.custom-opacity {
+  @include colors.useColor('main', color, 50);
+}
+```
+
+---
+
+## Special Utilities
+
+### Fill & Stroke (SVG)
+
+```html
+<svg class="fill:color-main">SVG with main fill</svg>
+<svg class="stroke:color-primary">SVG with primary stroke</svg>
+<svg class="fill:color-main:hover">Hover fill color</svg>
+```
+
+### Text Stroke
+
+```html
+<h1 class="text-stroke:color-main">Text with stroke</h1>
+<h2 class="text-stroke:color-primary:50">50% opacity stroke</h2>
+```

package/docs/grid-system.md

@@ -0,0 +1,130 @@
+# Grid System Documentation
+
+> Simple guide to using grid and flexbox utilities in Beathers CSS framework
+
+## Table of Contents
+
+- [CSS Grid](#css-grid)
+- [Flexbox](#flexbox)
+
+---
+
+## CSS Grid
+
+### Normal State
+
+```html
+<!-- Grid Container -->
+<div class="grid">
+  <div>Column 1</div>
+  <div>Column 2</div>
+  <div>Column 3</div>
+</div>
+
+<div class="grid cols:12">
+  <div class="col:4">1/3 width</div>
+  <div class="col:4">1/3 width</div>
+  <div class="col:4">1/3 width</div>
+</div>
+
+<div class="grid cols:12">
+  <div class="col:6">Half width</div>
+  <div class="col:6">Half width</div>
+</div>
+
+<div class="grid cols:12">
+  <div class="col:4">4 columns</div>
+  <div class="col:8">8 columns</div>
+  <div class="col:3">3 columns</div>
+  <div class="col:9">9 columns</div>
+  <div class="col:auto">Auto width</div>
+</div>
+```
+
+### Row System
+
+```html
+<div class="grid rows:12">
+  <div class="row:4">1/3 width</div>
+  <div class="row:4">1/3 width</div>
+  <div class="row:auto">Auto height</div>
+</div>
+```
+
+### Responsive Grid
+
+```html
+<div class="grid cols:1 md:cols:2 lg:cols:4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</div>
+
+<div class="grid cols:12">
+  <div class="col:12 md:col:6 lg:col:4">Responsive column</div>
+  <div class="col:12 md:col:6 lg:col:8">Responsive column</div>
+</div>
+```
+
+---
+
+## Flexbox
+
+### Normal State
+
+```html
+<!-- Basic Flex Container -->
+<div class="flex">
+  <div>Flex item 1</div>
+  <div>Flex item 2</div>
+  <div>Flex item 3</div>
+</div>
+
+<!-- Flex with direction -->
+<div class="flex row">Horizontal layout</div>
+<div class="flex column">Vertical layout</div>
+<div class="flex row-reverse">Reverse horizontal</div>
+<div class="flex column-reverse">Reverse vertical</div>
+```
+
+### Flex Wrap
+
+```html
+<div class="flex wrap">Wrapping flex container</div>
+<div class="flex nowrap">Non-wrapping flex container</div>
+```
+
+### Flex Wrapper System
+
+```html
+<!-- Auto-sized flex children -->
+<div class="flex flex-wrapper row cols:auto">
+  <div>Auto width item</div>
+  <div>Auto width item</div>
+  <div>Auto width item</div>
+</div>
+
+<!-- Equal columns with flex -->
+<div class="flex flex-wrapper row cols:3">
+  <div>1/3 width</div>
+  <div>1/3 width</div>
+  <div>1/3 width</div>
+</div>
+```
+
+### Responsive Flexbox
+
+```html
+<div class="flex column md:row">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+
+<div class="flex flex-wrapper row cols:1 md:cols:2 lg:cols:4">
+  <div>Responsive flex item</div>
+  <div>Responsive flex item</div>
+  <div>Responsive flex item</div>
+  <div>Responsive flex item</div>
+</div>
+```

package/docs/shaping.md

@@ -0,0 +1,272 @@
+# Shaping Documentation
+
+> Simple guide to visual styling utilities in Beathers CSS framework
+
+## Table of Contents
+
+- [Shadows](#shadows)
+- [Glass Effects](#glass-effects)
+- [Display & Visibility](#display--visibility)
+- [Overflow](#overflow)
+- [Object Fit](#object-fit)
+- [Positioning](#positioning)
+- [Sizing](#sizing)
+- [Border Radius](#border-radius)
+
+---
+
+## Shadows
+
+### Normal State
+
+```html
+<div class="shadow:light">Light shadow</div>
+<div class="shadow:soft">Soft shadow</div>
+<div class="shadow:medium">Medium shadow</div>
+<div class="shadow:solid">Solid shadow</div>
+<div class="shadow:floating">Floating shadow</div>
+<div class="shadow:flat">Flat shadow</div>
+```
+
+### Responsive Shadows
+
+```html
+<div class="shadow:soft md:shadow:medium lg:shadow:floating">Responsive shadow</div>
+<div class="shadow:light lg:shadow:solid">Mobile light, desktop solid</div>
+```
+
+---
+
+## Glass Effects
+
+### Normal State
+
+```html
+<div class="bg:glass">Glass effect element</div>
+<div class="bg:glass radius:full">Rounded glass effect</div>
+<div class="bg:glass shadow:soft">Glass with soft shadow</div>
+```
+
+### Theme Support
+
+```html
+<!-- Context method -->
+<div class="light">
+  <div class="bg:glass">Light theme glass</div>
+</div>
+<div class="dark">
+  <div class="bg:glass">Dark theme glass</div>
+</div>
+
+<!-- Direct method -->
+<div class="bg:glass light">Light glass</div>
+<div class="bg:glass dark">Dark glass</div>
+
+<!-- Utility-first -->
+<div class="light:bg:glass">Light only glass</div>
+<div class="dark:bg:glass">Dark only glass</div>
+```
+
+### Combined with Other Utilities
+
+```html
+<div class="bg:glass shadow:floating radius:full p-relative">Complete glass card</div>
+<div class="bg:glass color-main border:color-main">Glass with borders</div>
+<div class="bg:glass d-flex justify-center items-center">Glass container</div>
+```
+
+### Custom Settings
+
+Customize glass effects using CSS custom properties:
+
+```css
+.custom-glass {
+  --glass-blur: 12px;
+  --glass-border-thickness: 2px;
+  --glass-light-angle: 135deg;
+
+  /* Light theme colors */
+  --glass-color-light: rgba(255, 255, 255, 0.2);
+  --glass-border-1-color-light: rgba(255, 255, 255, 0.3);
+  --glass-border-2-color-light: rgba(255, 255, 255, 0.1);
+
+  /* Dark theme colors */
+  --glass-color-dark: rgba(0, 0, 0, 0.2);
+  --glass-border-1-color-dark: rgba(255, 255, 255, 0.1);
+  --glass-border-2-color-dark: rgba(255, 255, 255, 0.05);
+}
+```
+
+**Usage:**
+
+```html
+<div class="bg:glass custom-glass">Custom glass effect</div>
+```
+
+**Available Settings:**
+
+- `--glass-blur` - Backdrop blur amount (default: 8px)
+- `--glass-border-thickness` - Border thickness (default: 1px)
+- `--glass-light-angle` - Gradient angle (default: 45deg)
+- `--glass-color-light/dark` - Background colors for themes
+- `--glass-border-1/2-color-light/dark` - Border gradient colors
+
+---
+
+## Display & Visibility
+
+### Normal State
+
+```html
+<div class="d-inline">Inline display</div>
+<div class="d-block">Block display</div>
+<div class="d-inline-block">Inline-block display</div>
+<div class="d-flex">Flex display</div>
+<div class="d-inline-flex">Inline-flex display</div>
+<div class="d-inline-grid">Inline-grid display</div>
+<div class="d-table">Table display</div>
+<div class="d-table-cell">Table-cell display</div>
+<div class="d-none">Hidden element</div>
+```
+
+### Responsive Display
+
+```html
+<div class="d-none md:d-block">Hidden on mobile, visible on desktop</div>
+<div class="d-block lg:d-flex">Block on mobile, flex on desktop</div>
+```
+
+---
+
+## Overflow
+
+### Normal State
+
+```html
+<div class="overflow-visible">Visible overflow</div>
+<div class="overflow-hidden">Hidden overflow</div>
+<div class="overflow-auto">Auto overflow</div>
+<div class="overflow-scroll">Scroll overflow</div>
+```
+
+### Directional Overflow
+
+```html
+<div class="x:overflow-hidden">Hide horizontal overflow</div>
+<div class="y:overflow-auto">Auto vertical overflow</div>
+<div class="x:overflow-scroll y:overflow-hidden">Mixed overflow control</div>
+```
+
+### Responsive Overflow
+
+```html
+<div class="overflow-hidden md:overflow-auto">Responsive overflow</div>
+<div class="x:overflow-auto lg:x:overflow-hidden">Responsive horizontal</div>
+```
+
+---
+
+## Object Fit
+
+### Normal State
+
+```html
+<img class="object-fit:cover" src="image.jpg" />
+<img class="object-fit:fill" src="image.jpg" />
+<img class="object-fit:contain" src="image.jpg" />
+<img class="object-fit:none" src="image.jpg" />
+```
+
+### Responsive Object Fit
+
+```html
+<img class="object-fit:cover md:object-fit:contain" src="image.jpg" />
+<img class="object-fit:fill lg:object-fit:cover" src="image.jpg" />
+```
+
+---
+
+## Positioning
+
+### Normal State
+
+```html
+<div class="p-static">Static position</div>
+<div class="p-relative">Relative position</div>
+<div class="p-fixed">Fixed position</div>
+<div class="p-absolute">Absolute position</div>
+<div class="p-sticky">Sticky position</div>
+```
+
+### Responsive Positioning
+
+```html
+<div class="p-relative md:p-absolute">Responsive positioning</div>
+<div class="p-static lg:p-sticky">Mobile static, desktop sticky</div>
+```
+
+---
+
+## Sizing
+
+### Width
+
+```html
+<div class="w:25">25% width</div>
+<div class="w:50">50% width</div>
+<div class="w:75">75% width</div>
+<div class="w:100">100% width</div>
+
+<div class="min:w:25">Min 25% width</div>
+<div class="max:w:75">Max 75% width</div>
+```
+
+### Height
+
+```html
+<div class="h:25">25% height</div>
+<div class="h:50">50% height</div>
+<div class="h:75">75% height</div>
+<div class="h:100">100% height</div>
+
+<div class="min:h:50">Min 50% height</div>
+<div class="max:h:90">Max 90% height</div>
+```
+
+### Responsive Sizing
+
+```html
+<div class="w:100 md:w:50 lg:w:25">Responsive width</div>
+<div class="h:50 md:h:75 lg:h:100">Responsive height</div>
+<div class="min:w:25 lg:min:w:50">Responsive min-width</div>
+```
+
+---
+
+## Border Radius
+
+### Normal State
+
+```html
+<div class="radius:full">Full rounded</div>
+<div class="radius:top:full">Top rounded</div>
+<div class="radius:bottom:full">Bottom rounded</div>
+<div class="radius:start:full">Start rounded</div>
+<div class="radius:end:full">End rounded</div>
+```
+
+### Corner-Specific Radius
+
+```html
+<div class="radius:top-start:full">Top-start corner</div>
+<div class="radius:top-end:full">Top-end corner</div>
+<div class="radius:bottom-start:full">Bottom-start corner</div>
+<div class="radius:bottom-end:full">Bottom-end corner</div>
+```
+
+### Responsive Radius
+
+```html
+<div class="radius:full md:radius:top:full">Responsive border radius</div>
+<div class="radius:start:full lg:radius:full">Start on mobile, full on desktop</div>
+```