From 5545d75a31cb19fc825f554fc8d907d7c40c72d1 Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Tue, 21 Oct 2025 10:34:03 -0400 Subject: [PATCH] feat: add config file for more control --- CONFIGURATION.md | 227 +++++++++++++++++++++ README.md | 105 ++++++---- THEME-CONFIGURATION.md | 308 +++++++++++++++++++++++++++++ package.json | 3 +- src/scss/_config.scss | 114 +++++++++++ src/scss/base/_accessibility.scss | 3 +- src/scss/forms/_fieldset.scss | 3 + src/scss/forms/_gravity-forms.scss | 180 +---------------- src/scss/forms/_index.scss | 1 + src/scss/forms/_shared.scss | 34 ++-- 10 files changed, 747 insertions(+), 231 deletions(-) create mode 100644 CONFIGURATION.md create mode 100644 THEME-CONFIGURATION.md create mode 100644 src/scss/_config.scss diff --git a/CONFIGURATION.md b/CONFIGURATION.md new file mode 100644 index 0000000..58ebf92 --- /dev/null +++ b/CONFIGURATION.md @@ -0,0 +1,227 @@ +# UI Kit Configuration Guide + +## Overview + +UI Kit can be customized in three ways: + +1. **WordPress theme.json** - Runtime customization via CSS custom properties +2. **SCSS Variables** - Compile-time customization (this guide) +3. **Direct overrides** - Write your own CSS to override defaults + +## Method 1: Using SCSS with `@use` (Recommended) + +The modern Sass `@use` syntax allows you to configure variables when importing: + +```scss +// In your theme or plugin SCSS file +@use "@builtnorth/ui-kit" with ( + $form-field-padding: 1rem, + $form-field-border-radius: 0.5rem, + $button-padding-y: 1rem, + $button-padding-x: 2rem, + $breakpoint-md: 800px +); +``` + +## Method 2: Define Variables Before Import (Legacy) + +If using `@import`, define variables before importing: + +```scss +// Your custom config +$form-field-padding: 1rem; +$form-field-border-radius: 0.5rem; +$button-padding-y: 1rem; + +// Then import ui-kit +@import "@builtnorth/ui-kit"; +``` + +## Method 3: Import Config Separately + +You can also just import the config to use variables in your own code: + +```scss +@use "@builtnorth/ui-kit/config" as ui-kit; + +.my-custom-button { + padding: ui-kit.$button-padding-y ui-kit.$button-padding-x; + border-radius: ui-kit.$radius-md; +} +``` + +## Available Configuration Variables + +### Form Field Settings + +```scss +$form-field-padding: 0.11rem; +$form-field-border-width: 1px; +$form-field-border-color: #8e8e8e; +$form-field-border-radius: 0; +$form-field-focus-color: var(--wp--preset--color--primary); +``` + +### Form Choice Settings (Checkbox/Radio) + +```scss +$form-choice-size: 1.125rem; +$form-choice-spacing: 0.25rem; +$form-choice-border-radius: 0.25rem; +$form-choice-bg-color: #fff; +$form-choice-checked-bg: var(--wp--preset--color--primary); +$form-choice-checked-border: var(--wp--preset--color--primary); +``` + +### Button Settings + +```scss +$button-padding-y: 0.75rem; +$button-padding-x: 1.5rem; +$button-border-radius: 0.25rem; +$button-font-weight: 500; +``` + +### Layout Settings + +```scss +$grid-gutter: 1rem; +$grid-columns: 12; +$container-max-width: 1200px; +``` + +### Breakpoints + +```scss +$breakpoint-sm: 576px; +$breakpoint-md: 768px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; +$breakpoint-xxl: 1400px; +``` + +### Spacing Scale + +```scss +$spacing-20: 0.25rem; +$spacing-30: 0.5rem; +$spacing-40: 1rem; +$spacing-50: 1.5rem; +$spacing-60: 2rem; +$spacing-70: 3rem; +``` + +### Border Radius Scale + +```scss +$radius-sm: 0.25rem; +$radius-md: 0.5rem; +$radius-lg: 1rem; +$radius-full: 9999px; +``` + +### Transitions + +```scss +$transition-base: all 0.2s ease-in-out; +$transition-fast: all 0.1s ease-in-out; +$transition-slow: all 0.3s ease-in-out; +``` + +### Z-Index Scale + +```scss +$z-index-dropdown: 1000; +$z-index-sticky: 1020; +$z-index-fixed: 1030; +$z-index-modal-backdrop: 1040; +$z-index-modal: 1050; +$z-index-popover: 1060; +$z-index-tooltip: 1070; +``` + +## Real-World Examples + +### Example 1: Customize Forms for Your Brand + +```scss +// theme.scss +@use "@builtnorth/ui-kit" with ( + // Bigger, rounder form fields + $form-field-padding: 1rem, + $form-field-border-radius: 0.5rem, + $form-field-border-width: 2px, + + // Larger checkboxes + $form-choice-size: 1.5rem, + $form-choice-border-radius: 0.5rem +); +``` + +### Example 2: Adjust Breakpoints for Your Design + +```scss +@use "@builtnorth/ui-kit" with ( + // Custom breakpoints to match your design + $breakpoint-sm: 640px, + $breakpoint-md: 768px, + $breakpoint-lg: 1024px, + $breakpoint-xl: 1280px +); +``` + +### Example 3: Import Only What You Need + +```scss +// Only import forms with custom config +@use "@builtnorth/ui-kit/forms" with ( + $form-field-padding: 1rem +); + +// Or import specific components +@use "@builtnorth/ui-kit/forms/text" with ( + $form-field-padding: 1rem +); +@use "@builtnorth/ui-kit/forms/checkbox" with ( + $form-choice-size: 1.5rem +); +``` + +## Combining with WordPress theme.json + +UI Kit variables can use CSS custom properties, so you get the best of both worlds: + +**SCSS** (compile-time, can't change): + +```scss +@use "@builtnorth/ui-kit" with ( + $form-field-padding: 1rem // Fixed at compile time +); +``` + +**theme.json** (runtime, can change): + +```json +{ + "settings": { + "custom": { + "spacing": { + "form-field": "1rem" // Can be changed by user/theme + } + } + } +} +``` + +UI Kit defaults to theme.json values but lets you override with SCSS when needed! + +## Migration Guide + +If you're already using ui-kit and want to start customizing: + +1. **Identify** what you want to customize +2. **Find** the variable name in `_config.scss` +3. **Override** using `@use` with the new value +4. **Test** and verify changes compile correctly + +No breaking changes - all existing code continues to work! diff --git a/README.md b/README.md index 3b71234..65ae42a 100644 --- a/README.md +++ b/README.md @@ -10,62 +10,101 @@ npm install @builtnorth/ui-kit ## Usage -This package exports SCSS files that can be imported into your project. +This package exports SCSS files that can be imported into your project using modern `@use` syntax. ### Import Everything ```scss -@import "@builtnorth/ui-kit"; +@use "@builtnorth/ui-kit" as *; ``` +### Configure Once in Your Theme (Recommended) + +Configure ui-kit in your theme's `theme.json` - applies to ALL plugins automatically: + +```json +{ + "version": 3, + "settings": { + "custom": { + "spacing": { + "form-field": "1rem" + }, + "border-radius": { + "form-field": "0.5rem" + } + } + } +} +``` + +**✨ Theme configuration applies everywhere** - no need to configure each plugin separately! + +**πŸ“š See [THEME-CONFIGURATION.md](./THEME-CONFIGURATION.md) for the complete theme.json guide.** + +### Advanced: SCSS Variable Override (Per-Package) + +For package-specific overrides: + +```scss +@use "@builtnorth/ui-kit" with ( + $form-field-padding: 1rem, + $form-field-border-radius: 0.5rem +); +``` + +**πŸ“š See [CONFIGURATION.md](./CONFIGURATION.md) for SCSS configuration details.** + ### Import Essential Styles Only ```scss -@import "@builtnorth/ui-kit/essential-styles"; +@use "@builtnorth/ui-kit/essential-styles" as *; ``` ### Import Specific Modules ```scss // Base styles -@import "@builtnorth/ui-kit/base"; -@import "@builtnorth/ui-kit/base/utilities"; -@import "@builtnorth/ui-kit/base/reset"; -@import "@builtnorth/ui-kit/base/accessibility"; -@import "@builtnorth/ui-kit/base/images"; -@import "@builtnorth/ui-kit/base/colors"; - -// Components -@import "@builtnorth/ui-kit/components"; -@import "@builtnorth/ui-kit/components/buttons"; -@import "@builtnorth/ui-kit/components/slider"; +@use "@builtnorth/ui-kit/base" as *; +@use "@builtnorth/ui-kit/base/utilities" as *; +@use "@builtnorth/ui-kit/base/reset" as *; +@use "@builtnorth/ui-kit/base/accessibility" as *; +@use "@builtnorth/ui-kit/base/images" as *; +@use "@builtnorth/ui-kit/base/colors" as *; + +// Components (with namespace) +@use "@builtnorth/ui-kit/components" as ui; +@use "@builtnorth/ui-kit/components/buttons" as ui; +@use "@builtnorth/ui-kit/components/slider" as ui; // Forms -@import "@builtnorth/ui-kit/forms"; -@import "@builtnorth/ui-kit/forms/label"; -@import "@builtnorth/ui-kit/forms/fieldset"; -@import "@builtnorth/ui-kit/forms/select"; -@import "@builtnorth/ui-kit/forms/checkbox"; -@import "@builtnorth/ui-kit/forms/text"; - -// Helpers -@import "@builtnorth/ui-kit/helpers"; -@import "@builtnorth/ui-kit/helpers/mixins"; -@import "@builtnorth/ui-kit/helpers/functions"; -@import "@builtnorth/ui-kit/helpers/media-queries"; +@use "@builtnorth/ui-kit/forms" as *; +@use "@builtnorth/ui-kit/forms/label" as *; +@use "@builtnorth/ui-kit/forms/fieldset" as *; +@use "@builtnorth/ui-kit/forms/select" as *; +@use "@builtnorth/ui-kit/forms/checkbox" as *; +@use "@builtnorth/ui-kit/forms/text" as *; + +// Helpers (commonly namespaced as 'ui') +@use "@builtnorth/ui-kit/helpers" as ui; +@use "@builtnorth/ui-kit/helpers/mixins" as ui; +@use "@builtnorth/ui-kit/helpers/functions" as ui; +@use "@builtnorth/ui-kit/helpers/media-queries" as *; // Layout -@import "@builtnorth/ui-kit/layout"; -@import "@builtnorth/ui-kit/layout/grid"; -@import "@builtnorth/ui-kit/layout/columns"; +@use "@builtnorth/ui-kit/layout" as *; +@use "@builtnorth/ui-kit/layout/grid" as grid; +@use "@builtnorth/ui-kit/layout/columns" as *; // Gutenberg -@import "@builtnorth/ui-kit/gutenberg"; -@import "@builtnorth/ui-kit/gutenberg/quirks"; -@import "@builtnorth/ui-kit/gutenberg/placeholders"; -@import "@builtnorth/ui-kit/gutenberg/appenders"; +@use "@builtnorth/ui-kit/gutenberg" as *; +@use "@builtnorth/ui-kit/gutenberg/quirks" as *; +@use "@builtnorth/ui-kit/gutenberg/placeholders" as *; +@use "@builtnorth/ui-kit/gutenberg/appenders" as *; ``` +> **Note:** The `@use` syntax is recommended over the deprecated `@import`. Use `as *` to include styles globally, or use `as ui` (or any namespace) to access mixins and functions with a namespace prefix. + ## What's Included - **Base**: Reset, utilities, accessibility, images, and color utilities diff --git a/THEME-CONFIGURATION.md b/THEME-CONFIGURATION.md new file mode 100644 index 0000000..6af75d5 --- /dev/null +++ b/THEME-CONFIGURATION.md @@ -0,0 +1,308 @@ +# UI Kit Theme Configuration (WordPress theme.json) + +## Overview + +UI Kit uses **CSS custom properties** that map to WordPress theme.json settings. This means: + +βœ… **Configure ONCE in your theme** β†’ applies to ALL plugins using ui-kit +βœ… **Runtime configuration** β†’ no need to recompile plugins +βœ… **Theme always wins** β†’ centralized control + +## How It Works + +1. Your **theme** defines values in `theme.json` +2. WordPress outputs these as CSS custom properties (CSS variables) +3. **ALL plugins** using ui-kit read from these same CSS variables +4. Changes in theme.json **instantly apply everywhere** + +## Complete theme.json Configuration + +Add this to your theme's `theme.json`: + +```json +{ + "version": 3, + "settings": { + "custom": { + "spacing": { + "form-field": "1rem", + "form-column-gap": "1.5rem", + "form-choice-gap": "0.75rem" + }, + "border-width": { + "form-field": "2px" + }, + "border-radius": { + "form-field": "0.5rem", + "form-choice": "0.375rem" + }, + "color": { + "form-field-border": "rgba(0, 0, 0, 0.2)" + }, + "form-choice-size": "1.25rem" + } + } +} +``` + +## Available Configuration Options + +### Form Fields + +Configure text inputs, selects, and textareas: + +```json +{ + "settings": { + "custom": { + "spacing": { + "form-field": "1rem" // Padding inside form fields + }, + "border-width": { + "form-field": "2px" // Border thickness + }, + "border-radius": { + "form-field": "0.5rem" // Rounded corners + }, + "color": { + "form-field-border": "#e0e0e0" // Border color + } + } + } +} +``` + +**CSS Variables Created:** + +- `--wp--custom--spacing--form-field` +- `--wp--custom--border-width--form-field` +- `--wp--custom--border-radius--form-field` +- `--wp--custom--color--form-field-border` + +### Checkboxes & Radio Buttons + +```json +{ + "settings": { + "custom": { + "form-choice-size": "1.5rem", // Size of checkbox/radio + "border-radius": { + "form-choice": "0.5rem" // Rounded corners for checkbox + }, + "spacing": { + "form-choice-gap": "1rem" // Gap between choice and label + } + } + } +} +``` + +**CSS Variables Created:** + +- `--wp--custom--form-choice-size` +- `--wp--custom--border-radius--form-choice` +- `--wp--custom--spacing--form-choice-gap` + +### Colors + +Use WordPress color presets for consistency: + +```json +{ + "settings": { + "color": { + "palette": [ + { + "slug": "primary", + "color": "#0066cc", + "name": "Primary" + } + ] + } + } +} +``` + +**CSS Variables Created:** + +- `--wp--preset--color--primary` (used for focus states, checked states) + +### Spacing Scale + +Define your spacing system once: + +```json +{ + "settings": { + "spacing": { + "spacingSizes": [ + { + "slug": "20", + "size": "0.5rem", + "name": "X-Small" + }, + { + "slug": "30", + "size": "0.75rem", + "name": "Small" + }, + { + "slug": "40", + "size": "1rem", + "name": "Medium" + } + ] + } + } +} +``` + +**CSS Variables Created:** + +- `--wp--preset--spacing--20` +- `--wp--preset--spacing--30` +- `--wp--preset--spacing--40` + +## Real-World Example + +Here's a complete theme.json with form customization: + +```json +{ + "version": 3, + "settings": { + "color": { + "palette": [ + { + "slug": "primary", + "color": "#2563eb", + "name": "Primary Blue" + }, + { + "slug": "white", + "color": "#ffffff", + "name": "White" + } + ] + }, + "spacing": { + "spacingSizes": [ + { + "slug": "20", + "size": "0.5rem", + "name": "2X-Small" + }, + { + "slug": "30", + "size": "0.75rem", + "name": "X-Small" + }, + { + "slug": "40", + "size": "1rem", + "name": "Small" + }, + { + "slug": "50", + "size": "1.5rem", + "name": "Medium" + } + ] + }, + "custom": { + "spacing": { + "form-field": "1rem", + "form-column-gap": "1.5rem", + "form-choice-gap": "0.75rem" + }, + "border-width": { + "form-field": "1px" + }, + "border-radius": { + "form-field": "0.5rem", + "form-choice": "0.375rem" + }, + "color": { + "form-field-border": "#d1d5db" + }, + "form-choice-size": "1.25rem" + } + } +} +``` + +## Testing Your Configuration + +After updating theme.json: + +1. **Clear cache** (if using caching) +2. **Inspect a form field** in browser DevTools +3. **Check computed styles** - you should see your custom property values + +Example in DevTools: + +```css +input { + padding: var(--wp--custom--spacing--form-field, 0.11rem); /* Your value! */ + border-width: var(--wp--custom--border-width--form-field, 1px); +} +``` + +## Advanced: CSS Override + +You can also override in custom CSS if needed: + +```css +/* In your theme's style.css or custom CSS */ +:root { + --wp--custom--spacing--form-field: 1.25rem; + --wp--custom--border-radius--form-field: 0.75rem; +} + +/* Or scope to specific forms */ +.my-special-form { + --wp--custom--spacing--form-field: 2rem; +} +``` + +## Why This Works Across Plugins + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Theme theme.json β”‚ +β”‚ Defines: --wp--custom--spacing--... β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + β”‚ + β”‚ CSS Variables cascade globally + β”‚ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ β”‚ β”‚ β”‚ +β”Œβ”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β” +β”‚ polaris- β”‚ β”‚ polaris- β”‚ β”‚ polaris- β”‚ β”‚ compass β”‚ +β”‚ forms β”‚ β”‚ blocks β”‚ β”‚ directory β”‚ β”‚ theme β”‚ +β”‚ (reads var) β”‚ β”‚ (reads var) β”‚ β”‚ (reads var) β”‚ β”‚(reads varβ”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +All packages read from the **same CSS variables** defined once in your theme! + +## Migration from Hardcoded Values + +If you have plugins with hardcoded form styles: + +**Before:** + +```scss +input { + padding: 1rem; // Hardcoded in plugin +} +``` + +**After (using ui-kit):** + +```scss +@use "@builtnorth/ui-kit/forms" as *; +// Automatically uses theme.json values! +``` + +No configuration needed in the plugin - theme controls everything! πŸŽ‰ diff --git a/package.json b/package.json index 1a7d05b..0d87037 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@builtnorth/ui-kit", - "version": "1.0.0", + "version": "1.1.0", "description": "NPM package for very minimal global and common CSS and JS.", "main": "index.js", "scripts": { @@ -18,6 +18,7 @@ "homepage": "https://github.com/builtnorth/ui-kit#readme", "exports": { ".": "./src/scss/style.scss", + "./config": "./src/scss/_config.scss", "./essential-styles": "./src/scss/essential-styles.scss", "./base": "./src/scss/base/index.scss", "./base/utilities": "./src/scss/base/_utilities.scss", diff --git a/src/scss/_config.scss b/src/scss/_config.scss new file mode 100644 index 0000000..86e86b7 --- /dev/null +++ b/src/scss/_config.scss @@ -0,0 +1,114 @@ +// ============================================================================ +// UI Kit Configuration +// ============================================================================ +// Override any of these variables BEFORE importing ui-kit to customize +// +// Example usage in your theme/plugin: +// @use "@builtnorth/ui-kit" with ( +// $form-field-padding: 1rem, +// $form-border-radius: 0.5rem +// ); + +// Form Field Settings +// ---------------------------------------------------------------------------- +$form-field-padding: var(--wp--custom--form-field-padding, 0.11rem) !default; +$form-field-border-width: var( + --wp--custom--form-field-border-width, + 1px +) !default; +$form-field-border-color: var( + --wp--custom--form-field-border-color, + #8e8e8e +) !default; +$form-field-border-radius: var( + --wp--custom--form-field-border-radius, + 0 +) !default; +$form-field-focus-color: var( + --wp--custom--form-field-focus-color, + var(--wp--preset--color--primary) +) !default; +$form-field-bg-color: var(--wp--custom--form-field-bg-color, #fff) !default; +$form-field-text-color: var(--wp--custom--form-field-text-color, #000) !default; + +// Form Choice Settings (checkbox/radio) +// ---------------------------------------------------------------------------- +$form-choice-size: var(--wp--custom--form-choice-size, 1.125rem) !default; +$form-choice-spacing: var(--wp--custom--form-choice-spacing, 0.25rem) !default; +$form-choice-border-radius: var( + --wp--custom--form-choice-border-radius, + 0.25rem +) !default; +$form-choice-checked-color: var( + --wp--custom--form-choice-checked-color, + var(--wp--preset--color--primary) +) !default; + +// Button Settings +// ---------------------------------------------------------------------------- +$button-padding-y: var( + --wp--custom--spacing--button-top-bottom, + 0.75rem +) !default; +$button-padding-x: var( + --wp--custom--spacing--button-left-right, + 1.5rem +) !default; +$button-border-radius: var( + --wp--custom--border-radius--medium, + 0.25rem +) !default; +$button-font-weight: var(--wp--custom--font-weight--medium, 500) !default; + +// Layout Settings +// ---------------------------------------------------------------------------- +$grid-gutter: var(--wp--custom--spacing--gutter, 1rem) !default; +$grid-columns: 12 !default; +$container-max-width: var(--wp--custom--layout--content-size, 1200px) !default; + +// Breakpoints +// ---------------------------------------------------------------------------- +$breakpoint-sm: 576px !default; +$breakpoint-md: 768px !default; +$breakpoint-lg: 992px !default; +$breakpoint-xl: 1200px !default; +$breakpoint-xxl: 1400px !default; + +// Colors (can be overridden but default to theme.json) +// ---------------------------------------------------------------------------- +$color-primary: var(--wp--preset--color--primary) !default; +$color-secondary: var(--wp--preset--color--secondary) !default; +$color-base: var(--wp--preset--color--base) !default; +$color-contrast: var(--wp--preset--color--contrast) !default; + +// Spacing Scale (can be overridden but default to theme.json) +// ---------------------------------------------------------------------------- +$spacing-20: var(--wp--preset--spacing--20, 0.25rem) !default; +$spacing-30: var(--wp--preset--spacing--30, 0.5rem) !default; +$spacing-40: var(--wp--preset--spacing--40, 1rem) !default; +$spacing-50: var(--wp--preset--spacing--50, 1.5rem) !default; +$spacing-60: var(--wp--preset--spacing--60, 2rem) !default; +$spacing-70: var(--wp--preset--spacing--70, 3rem) !default; + +// Border Radius Scale +// ---------------------------------------------------------------------------- +$radius-sm: var(--wp--custom--border-radius--small, 0.25rem) !default; +$radius-md: var(--wp--custom--border-radius--medium, 0.5rem) !default; +$radius-lg: var(--wp--custom--border-radius--large, 1rem) !default; +$radius-full: var(--wp--custom--border-radius--round, 9999px) !default; + +// Transitions +// ---------------------------------------------------------------------------- +$transition-base: all 0.2s ease-in-out !default; +$transition-fast: all 0.1s ease-in-out !default; +$transition-slow: all 0.3s ease-in-out !default; + +// Z-Index Scale +// ---------------------------------------------------------------------------- +$z-index-dropdown: 1000 !default; +$z-index-sticky: 1020 !default; +$z-index-fixed: 1030 !default; +$z-index-modal-backdrop: 1040 !default; +$z-index-modal: 1050 !default; +$z-index-popover: 1060 !default; +$z-index-tooltip: 1070 !default; diff --git a/src/scss/base/_accessibility.scss b/src/scss/base/_accessibility.scss index 7dc5f85..d5573ff 100644 --- a/src/scss/base/_accessibility.scss +++ b/src/scss/base/_accessibility.scss @@ -42,7 +42,8 @@ Helper classes for improving accessibility. /* Screen reader text ----------------------------------------------------------------*/ -.screen-reader-only { +.screen-reader-only, +.hidden_label > label { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); diff --git a/src/scss/forms/_fieldset.scss b/src/scss/forms/_fieldset.scss index e69de29..9e86ac7 100644 --- a/src/scss/forms/_fieldset.scss +++ b/src/scss/forms/_fieldset.scss @@ -0,0 +1,3 @@ +fieldset { + all: unset; +} diff --git a/src/scss/forms/_gravity-forms.scss b/src/scss/forms/_gravity-forms.scss index 2f53296..bb94a7a 100644 --- a/src/scss/forms/_gravity-forms.scss +++ b/src/scss/forms/_gravity-forms.scss @@ -1,179 +1 @@ -.gform_body, -.gform_page { - display: flex; - flex-direction: column; - gap: var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ); -} - -.gfield { - grid-column: 1 / -1; - min-inline-size: 0; -} - -.ginput_complex { - > span { - display: flex; - flex-direction: column; - - label { - order: 2; - } - - input { - order: 1; - } - } -} - -.gfield_radio, -.gfield_checkbox { - display: flex; - flex-wrap: wrap; - gap: var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ); - - .gchoice { - display: flex; - align-items: flex-start; - gap: var( - --wp--custom--spacing--form-choice-gap, - var(--wp--preset--spacing--30, 0.75rem) - ); - } -} - -.ginput_container_consent { - display: grid; - grid-template-columns: auto 1fr; - gap: var( - --wp--custom--spacing--form-choice-gap, - var(--wp--preset--spacing--30, 0.75rem) - ); - align-items: start; - - input[type="checkbox"] { - margin-block-start: 0.25em; // Align with first line of text - } - - .gfield_consent_label { - display: inline; - } -} - -.gform_fields { - display: grid; - grid-template-columns: repeat(12, 1fr); - column-gap: var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ); - row-gap: var( - --wp--custom--spacing--form-row-gap, - var(--wp--style--block-gap, 1rem) - ); -} - -.gform_page_footer { - display: flex; - flex-wrap: wrap; - gap: var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ); -} - -.gform-grid-row { - display: flex; - flex-flow: row wrap; - gap: var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ); -} - -.gform-grid-col { - flex: 0 0 100%; - min-inline-size: 0; -} - -.ginput_address_city, -.ginput_address_country, -.ginput_address_state, -.ginput_address_zip { - flex: 0 0 - calc( - 50% - - ( - var( - --wp--custom--spacing--form-column-gap, - var(--wp--style--block-gap, 1rem) - ) / - 2 - ) - ); - @container (max-width: 48rem) { - flex-basis: 100%; - } -} - -.gform-grid-col.gform-grid-col--size-auto { - flex: 1; - inline-size: auto; -} - -.gfield--width-full { - grid-column: span 12; -} - -.gfield--width-half { - grid-column: span 6; - @container (max-width: 48rem) { - grid-column: span 12; - } -} - -.gfield--width-third { - grid-column: span 4; - @container (max-width: 48rem) { - grid-column: span 12; - } -} - -.gfield--width-two-third { - grid-column: span 8; - @container (max-width: 48rem) { - grid-column: span 12; - } -} -.gfield--width-quarter { - grid-column: span 3; - @container (max-width: 48rem) { - grid-column: span 12; - } -} - -.gfield--width-three-quarter { - grid-column: span 9; - @container (max-width: 48rem) { - grid-column: span 12; - } -} - -.gfield--width-five-sixths { - grid-column: span 10; - @container (max-width: 48rem) { - grid-column: span 12; - } -} - -.gfield--width-one-sixth { - grid-column: span 2; - @container (max-width: 48rem) { - grid-column: span 12; - } -} +// soon to be deleted diff --git a/src/scss/forms/_index.scss b/src/scss/forms/_index.scss index 01935df..73873dc 100644 --- a/src/scss/forms/_index.scss +++ b/src/scss/forms/_index.scss @@ -1,3 +1,4 @@ +@forward "./shared"; @forward "./checkbox"; @forward "./fieldset"; @forward "./label"; diff --git a/src/scss/forms/_shared.scss b/src/scss/forms/_shared.scss index 34d3a37..62f9679 100644 --- a/src/scss/forms/_shared.scss +++ b/src/scss/forms/_shared.scss @@ -1,29 +1,30 @@ +@use "../config" as *; + input, select, textarea { margin: 0; - border-width: var(--wp--custom--border-width--form-field, 1px); - border-color: var(--wp--custom--color--form-field-border, #8e8e8e); - border-radius: var(--wp--custom--border-radius--form-field, 0); - padding-top: var(--wp--custom--spacing--form-field, 0.11rem); - padding-bottom: var(--wp--custom--spacing--form-field, 0.11rem); - padding-left: var(--wp--custom--spacing--form-field, 0.11rem); - padding-right: var(--wp--custom--spacing--form-field, 0.11rem); + border-width: $form-field-border-width; + border-color: $form-field-border-color; + border-radius: $form-field-border-radius; + padding: $form-field-padding; + background-color: $form-field-bg-color; width: 100%; + color: $form-field-text-color; &:focus, &:focus-within { - outline-color: var(--wp--preset--color--primary); + outline-color: $form-field-focus-color; } } input[type="checkbox"], input[type="radio"] { - margin-top: var(--wp--preset--spacing--20, 0.25rem); - width: var(--wp--custom--form-choice-size, 1.125rem); - height: var(--wp--custom--form-choice-size, 1.125rem); + margin-top: $form-choice-spacing; + width: $form-choice-size; + height: $form-choice-size; appearance: none; - background-color: var(--wp--preset--color--white, #fff); + background-color: $form-field-bg-color; border-style: solid; display: inline-block; vertical-align: middle; @@ -33,18 +34,17 @@ input[type="radio"] { flex-shrink: 0; &:checked { - background-color: var(--wp--preset--color--primary); - border-color: var(--wp--preset--color--primary); + background-color: $form-choice-checked-color; + border-color: $form-choice-checked-color; } &:focus { - outline-color: var(--wp--preset--color--primary); - outline-offset: 2px; + outline-color: $form-field-focus-color; } } input[type="checkbox"] { - border-radius: var(--wp--custom--border-radius--form-choice, 0.25rem); + border-radius: $form-choice-border-radius; &:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");