From e3650e2c00fa8a5ed287a89c0d27571fb8ec91be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 12 Dec 2024 16:17:31 +0100 Subject: [PATCH] Fix: Remove Styleguide from scaffold --- .../assets/css/styleguide/styleguide.css | 195 ------------- .../assets/js/styleguide/styleguide.js | 6 - .../assets/js/styleguide/uikitsection.js | 101 ------- themes/10up-theme/includes/utility.php | 63 ----- themes/10up-theme/package.json | 1 - .../10up-theme/templates/page-styleguide.php | 265 ------------------ 6 files changed, 631 deletions(-) delete mode 100644 themes/10up-theme/assets/css/styleguide/styleguide.css delete mode 100644 themes/10up-theme/assets/js/styleguide/styleguide.js delete mode 100644 themes/10up-theme/assets/js/styleguide/uikitsection.js delete mode 100644 themes/10up-theme/templates/page-styleguide.php diff --git a/themes/10up-theme/assets/css/styleguide/styleguide.css b/themes/10up-theme/assets/css/styleguide/styleguide.css deleted file mode 100644 index 97707e27..00000000 --- a/themes/10up-theme/assets/css/styleguide/styleguide.css +++ /dev/null @@ -1,195 +0,0 @@ -/* stylelint-disable */ -:root { - --c-uikit-base: #fff; - --c-uikit-accent: #767676; - --c-uikit-hightlight: #f6f6f6; - --c-uikit-border: #ccc; - --c-uikit-primary: #000; - --c-uikit-color-label: #000; - --c-uikit-color-label-bg: #fff; - - @custom-media --bp-uikit-small (min-width: 40.625em); -} - -.uikit__container { - padding-left: 20px; - padding-right: 20px; -} - -.uikit__heading { - border-bottom: 1px solid var(--c-uikit-border); - font-size: 56px; - font-weight: 400; - letter-spacing: 0.055em; - margin: 100px auto 130px; - max-width: 720px; - padding: 0; - text-align: center; - text-transform: uppercase; -} - -.uikit__heading span { - background: var(--c-uikit-base); - display: inline-block; - padding: 0 40px; -} - -.uikit__content { - margin: auto; - max-width: 960px; -} - -.uikit__block { - margin-bottom: -33px; -} - -.uikit__colors { - align-items: center; - display: flex; - flex-flow: row wrap; - font-family: "Courier New", monospace; - gap: 32px; - list-style: none; - margin: 0 auto; - overflow: hidden; - padding: 0; - text-align: center; - - & > li.uikit__color { - align-items: center; - border: 1px solid var(--c-uikit-border); - display: flex; - flex: 0 0 auto; - font-size: 0.85em; - height: 90px; - justify-content: center; - margin: 0; - width: 90px; - - &:focus, - &:hover { - & .uikit__color--label { - left: auto; - } - } - } -} - -.uikit__color--label { - background: var(--c-uikit-color-label-bg); - border: 1px solid var(--c-uikit-border); - color: var(--c-uikit-color-label); - font-size: var(--fs-xxs, 12px); - left: -999em; - margin: 0; - padding: 0.5em; - position: absolute; -} - -.uikit__color--label.light { - color: var(--c-uikit-base); -} - -.uikit__icons { - text-align: center; -} - -.uikit__icon { - align-items: center; - background: var(--c-uikit-hightlight); - display: flex; - float: left; - height: 62px; - justify-content: center; - margin-bottom: 32px; - margin-right: 32px; - width: 62px; -} - -.uikit__icon--label { - left: -999em; - position: absolute; -} - -.uikit__section > .heading { - box-sizing: border-box; - color: var(--c-uikit-accent); - display: inline-block; - font-size: 14px; - font-weight: 400; - margin: 0; - padding: 0 40px 20px 0; - vertical-align: top; - width: 100%; -} - -.uikit__section > .heading > .toggle { - background-color: transparent; - border: 0; - color: inherit; - cursor: pointer; - font-size: inherit; - font-weight: inherit; - overflow: hidden; - padding: 0 18px 0 0; - position: relative; -} - -.uikit__chevron-up, -.uikit__chevron-down { - fill: currentColor; - position: absolute; - right: 0; - top: 50%; - transform: translate(0, -50%); -} - -.uikit__chevron-up { - display: none; -} - -.uikit__section > .heading > .toggle[aria-expanded="true"] .uikit__chevron-up, -.uikit__chevron-down { - display: block; -} - -.uikit__section - > .heading - > .toggle[aria-expanded="true"] - .uikit__chevron-down { - display: none; -} - -.uikit__section > .content { - box-sizing: border-box; - display: inline-block; - margin-bottom: 100px; - vertical-align: top; - width: 100%; -} - -.uikit__section > .content[hidden] { - display: none; -} - -.uikit-mb-1 { - margin-bottom: 1em; -} - -@media (--bp-uikit-small) { - .uikit__section > .heading { - width: 145px; - } - - .uikit__section.-secondary > .heading { - width: 100%; - } - - .uikit__section > .content { - width: calc(100% - 150px); - } - - .uikit__section.-secondary > .content { - width: 100%; - } -} diff --git a/themes/10up-theme/assets/js/styleguide/styleguide.js b/themes/10up-theme/assets/js/styleguide/styleguide.js deleted file mode 100644 index ff3249e2..00000000 --- a/themes/10up-theme/assets/js/styleguide/styleguide.js +++ /dev/null @@ -1,6 +0,0 @@ -import '../../css/styleguide/styleguide.css'; - -import UIKitSection from './uikitsection'; - -const uiKitSection = new UIKitSection(document.querySelectorAll('.uikit__section h2.heading')); -uiKitSection.init(); diff --git a/themes/10up-theme/assets/js/styleguide/uikitsection.js b/themes/10up-theme/assets/js/styleguide/uikitsection.js deleted file mode 100644 index 59832e58..00000000 --- a/themes/10up-theme/assets/js/styleguide/uikitsection.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * @module UIKitSection - * - * @description - * - * Collapsible UI kit sections - * - */ -export default class UIKitSection { - /** - * Initialize everything - * - * @param {Element[]} elements Section Heading elements. - */ - constructor(elements) { - // Grab all the UI kit section headings - this.sectionHeadings = elements; - } - - /** - * Inits UI Kit Section - */ - init() { - // Stop if there's no section heading - if (!this.sectionHeadings) { - console.error("Styleguide: No sections detected."); // eslint-disable-line - return; - } - - this.sectionHeadings.forEach((sectionHeading) => { - this.setupCollapsible(sectionHeading); - }); - } - - /** - * Create a button, add chevron SVG and inject in heading - * Hide section content, set ARIA attributes - * - * @param {Element} sectionHeading The UI Kit section heading - * - */ - setupCollapsible(sectionHeading) { - // Get section ID - const sectionID = sectionHeading.parentNode.id; - - // Default state - let expanded = true; - - // Check localStorage to see if we want to expand some sections by default - if (localStorage) { - // Override expanded state - expanded = localStorage.getItem(`section-${sectionID}`) !== 'true' || false; - } - - // Build the button, add the SVG chevron icons - // eslint-disable-next-line no-param-reassign - sectionHeading.innerHTML = ` - - `; - - // Get the section content and hide it - const wrapper = sectionHeading.parentNode.querySelector('.content'); - wrapper.hidden = expanded; - wrapper.setAttribute('aria-hidden', expanded); - wrapper.setAttribute('aria-labelledby', `toggle-${sectionID}`); - - // Assign click event to the button - const button = sectionHeading.querySelector('button'); - button.onclick = (e) => this.toggleCollapsible(e, wrapper, button); - } - - /** - * Toggles a section - * - * @param {object} e The click event - * @param {Element} wrapper The UI Kit section content - * @param {Element} button The UI Kit section toggle button - * - */ - toggleCollapsible(e, wrapper, button) { - // Expanded state as bool - const expanded = button.getAttribute('aria-expanded') === 'true' || false; - - // Toggle expanded state and visibility - button.setAttribute('aria-expanded', !expanded); - // eslint-disable-next-line no-param-reassign - wrapper.hidden = expanded; - wrapper.setAttribute('aria-hidden', expanded); - - // Store expanded state in localStorage - const sectionID = wrapper.parentNode.id; - - if (localStorage) { - localStorage.setItem(`section-${sectionID}`, !expanded); - } - } -} diff --git a/themes/10up-theme/includes/utility.php b/themes/10up-theme/includes/utility.php index 07c96aed..e7c72faf 100755 --- a/themes/10up-theme/includes/utility.php +++ b/themes/10up-theme/includes/utility.php @@ -38,66 +38,3 @@ function get_asset_info( $slug, $attribute = null ) { return $asset; } - -/** - * Extract colors from a CSS or Sass file - * - * @param string $path the path to your CSS variables file - * - * @throws \RuntimeException If the file is not found or could not be read - * - * @return array - */ -function get_colors( $path ) { - - $dir = get_stylesheet_directory(); - - if ( file_exists( $dir . $path ) ) { - $css_vars = file_get_contents( $dir . $path ); // phpcs:ignore WordPress.WP.AlternativeFunctions - - if ( false === $css_vars ) { - throw new \RuntimeException( 'Could not read CSS variables file.' ); - } - - // HEX(A) | RGB(A) | HSL(A) - rgba & hsla alpha as decimal or percentage - // https://regex101.com/r/l7AZ8R/ - // this is a loose match and will accept almost anything within () for rgb(a) & hsl(a) - // a more optinionated solution is WIP here if you can improve on it https://regex101.com/r/FEtzDu/ - preg_match_all( '(#(?:[\da-f]{3}){1}\b|#(?:[\da-f]{2}){3,4}\b|(rgb|hsl)a?\((\s|\d|[a-zA-Z]+|,|-|%|\.|\/)+\))', $css_vars, $matches ); - - return $matches[0]; - } - - throw new \RuntimeException( 'CSS variables file not found.' ); -} - -/** - * Adjust the brightness of a color (HEX) - * - * @param string $hex The hex code for the color - * @param number $steps amount you want to change the brightness - * @return string new color with brightness adjusted - */ -function adjust_brightness( $hex, $steps ) { - - // Steps should be between -255 and 255. Negative = darker, positive = lighter - $steps = max( -255, min( 255, $steps ) ); - - // Normalize into a six character long hex string - $hex = str_replace( '#', '', $hex ); - if ( 3 === strlen( $hex ) ) { - $hex = str_repeat( substr( $hex, 0, 1 ), 2 ) . str_repeat( substr( $hex, 1, 1 ), 2 ) . str_repeat( substr( $hex, 2, 1 ), 2 ); - } - - // Split into three parts: R, G and B - $color_parts = str_split( $hex, 2 ); - $return = '#'; - - foreach ( $color_parts as $color ) { - $color = hexdec( $color ); // Convert to decimal - $color = max( 0, min( 255, $color + $steps ) ); // Adjust color - $return .= str_pad( dechex( intval( $color ) ), 2, '0', STR_PAD_LEFT ); // Make two char hex code - } - - return $return; -} diff --git a/themes/10up-theme/package.json b/themes/10up-theme/package.json index 2bd8e480..686c2253 100644 --- a/themes/10up-theme/package.json +++ b/themes/10up-theme/package.json @@ -30,7 +30,6 @@ "editor-style-overrides": "./assets/js/admin/editor-style-overrides.js", "frontend": "./assets/js/frontend/frontend.js", "shared": "./assets/js/shared/shared.js", - "styleguide": "./assets/js/styleguide/styleguide.js", "block-editor-script": "./includes/block-editor-script.js" } } diff --git a/themes/10up-theme/templates/page-styleguide.php b/themes/10up-theme/templates/page-styleguide.php deleted file mode 100644 index a33b4215..00000000 --- a/themes/10up-theme/templates/page-styleguide.php +++ /dev/null @@ -1,265 +0,0 @@ - - -
- -

-
- -
-

- -
- - -
-

Primary Palette

- -
-
    - - - -
  • -

    -
    • - - - -
-
- -
- - -
-

Headings

- -
-

H1, Heading 1 {64px}

-

H2, Heading 2 {48px}

-

H3, Heading 3 {38px}

-

H4, Heading 4 {30px}

-
H5, Heading 5 {26px}
-
- -
- -
-

Body

- -
-

- 22pt, Acta Book, line 36 ( 1.5rem ). Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Multa sunt dicta ab antiquis de contemnendis - ac despiciendis rebus humanis; Hoc mihi cum tuo fratre convenit. Fortasse - id optimum, sed ubi illud: Plus semper voluptatis? Haec quo modo conveniant, - non sane intellego. Lorem ipsum dolor sit amet, consectetur adipiscing - elit. Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus - humanis; Hoc mihi cum tuo fratre convenit. Fortasse id optimum, sed ubi - illud: Plus semper voluptatis? Haec quo modo conveniant, non sane intellego. -

- -

- This is an inline link text example and hover link example. -

-
- -
- -
-

Buttons

- -
- - - -
- -
- -
-

Inputs

- -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
-
- Checkbox Field Grouping -
- - -
-
- - -
-
- - -
-
-
- -
-
- Radio Button Field Grouping -
- - -
-
- - -
-
- - -
-
-
- -
- -
- -
-

Lists

- -
-
    -
  • Morbi natoque habitasse
    • -
  • Magnis ullamcorper risus taciti -
      -
    • Justo metus turpis habitant nisl
      • -
    • Platea primis semper
      • -
    -
    • -
  • Nibh id natoque elementum
    • -
- -
    -
  1. Morbi natoque habitasse
    2. -
  2. Magnis ullamcorper risus taciti -
      -
    1. Justo metus turpis habitant nisl
      2. -
    2. Platea primis semper
      3. -
    -
    3. -
  3. Nibh id natoque elementum
    4. -
-
-
- -
-

Tables

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Egestas duis tincidunt cum
IDItemPurchase DatePrice
Sum$15.55
1Stick of gum02/13/15$0.19
2Toothbrush11/03/14$2.37
3Umbrella05/12/17$12.99
-
-
- -
- -
- -