From f32f6b0010ea5a8f67f75953233d9669d813b5e6 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Mon, 10 Jun 2024 11:50:38 +0200 Subject: [PATCH] feat: improve styles doc page --- apps/example-styles/index.html | 8 +- apps/example-styles/public/favicon.ico | Bin 15086 -> 7662 bytes apps/example-styles/src/app/app.element.css | 20 +- apps/example-styles/src/app/app.element.html | 558 +++++++++++-------- apps/example-styles/src/app/app.element.ts | 24 + libs/plugins-styles/README.md | 8 + 6 files changed, 378 insertions(+), 240 deletions(-) diff --git a/apps/example-styles/index.html b/apps/example-styles/index.html index 4efdbe2..c4935a5 100644 --- a/apps/example-styles/index.html +++ b/apps/example-styles/index.html @@ -2,15 +2,21 @@ - ExampleStyles + Penpot plugin styles + + + diff --git a/apps/example-styles/public/favicon.ico b/apps/example-styles/public/favicon.ico index 317ebcb2336e0833a22dddf0ab287849f26fda57..d2222316ea0d038b553774e7da047f3b83e4f732 100644 GIT binary patch literal 7662 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 literal 15086 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 styles +

Plugin styles

Colors

@@ -156,10 +156,10 @@ >
  • - --la-seconlary + --la-secondary
  • @@ -367,20 +367,20 @@

    Caption

    Code font

    - - <p class="display">Display</p>
    - <p class="title-l">Title L</p>
    - <p class="title-m">Title M</p>
    - <p class="title-s">Title S</p>
    - <p class="headline-l">Headline L</p>
    - <p class="headline-m">Headline M</p>
    - <p class="headline-s">Headline S</p>
    - <p class="body-l">Body large</p>
    - <p class="body-m">Body medium</p>
    - <p class="body-s">Body small</p>
    - <p class="caption">Caption</p>
    - <p class="code-font">Code font</p>
    -     +
    • @@ -483,28 +483,28 @@ - - <span class="icon icon-arrow-bottom"></span>
    - <span class="icon icon-arrow-top"></span>
    - <span class="icon icon-arrow-right"></span>
    - <span class="icon icon-arrow-left"></span>
    - <span class="icon icon-close"></span>
    - <span class="icon icon-close-l"></span>
    - <span class="icon icon-delete"></span>
    - <span class="icon icon-add"></span>
    - <span class="icon icon-remove"></span>
    - <span class="icon icon-search"></span>
    - <span class="icon icon-copy"></span>
    - <span class="icon icon-more"></span>
    - <span class="icon icon-loading"></span>
    - <span class="icon icon-help"></span>
    - <span class="icon icon-info"></span>
    - <span class="icon icon-show"></span>
    - <span class="icon icon-hide"></span>
    - <span class="icon icon-lock"></span>
    - <span class="icon icon-unlock"></span>
    - <span class="icon icon-download"></span> -     +
    @@ -538,28 +538,31 @@ - - <div class="form-group">
    -  <label class="select-label-hidden" for="select-1">Which is - your favorite animal?</label>
    -  <select class="select" id="select-1">
    -   <option value="1">Quokka</option>
    -   <option value="2">Rabbit</option>
    -   <option value="3">Goat</option>
    -   <option value="4">Capybara</option>
    -  </select>
    - </div>
    - <div class="form-group">
    -  <label class="select-label-hidden" for="select-2">Which is - your favorite animal?</label>
    -  <select class="select" id="select-2" disabled>
    -   <option value="1">Quokka</option>
    -   <option value="2">Rabbit</option>
    -   <option value="3">Goat</option>
    -   <option value="4">Capybara</option>
    -  </select>
    - </div> -     + +
    @@ -590,28 +593,30 @@
    - - <div class="form-group">
    -  <label class="select-label-hidden" for="select-1">Which is - your favorite animal?</label>
    -  <select class="select" id="select-1">
    -   <option value="1">Quokka</option>
    -   <option value="2">Rabbit</option>
    -   <option value="3">Goat</option>
    -   <option value="4">Capybara</option>
    -  </select>
    - </div>
    - <div class="form-group">
    -  <label class="select-label-hidden" for="select-2">Which is - your favorite animal?</label>
    -  <select class="select" id="select-2" disabled>
    -   <option value="1">Quokka</option>
    -   <option value="2">Rabbit</option>
    -   <option value="3">Goat</option>
    -   <option value="4">Capybara</option>
    -  </select>
    - </div> -     +
    @@ -655,28 +660,45 @@ - - <div class="theme-group" data-theme="dark">
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-1">This - is the label</label>
    -   <input class="input" type="text" placeholder="Input dark - theme" id="input-1"/>
    -  </div>
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-2">This - is the label</label>
    -   <input class="input success" type="text" - placeholder="Input dark theme success" id="input-2"/>
    -  </div>
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-3">This - is the label</label>
    -   <input class="input error" type="text" placeholder="Input - dark theme error" id="input-3"/>
    -  </div>
    - </div> -     +
    @@ -716,28 +738,45 @@
    - - <div class="theme-group" data-theme="light">
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-4">This - is the label</label>
    -   <input class="input" type="text" placeholder="Input light - theme" id="input-4"/>
    -  </div>
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-5">This - is the label</label>
    -   <input class="input success" type="text" - placeholder="Input light theme success" id="input-5"/>
    -  </div>
    -  <div class="form-group">
    -   <label class="input-label-hidden" for="input-6">This - is the label</label>
    -   <input class="input error" type="text" placeholder="Input - light theme error" id="input-6"/>
    -  </div>
    - </div> -     + @@ -781,14 +820,14 @@ - - <div data-theme="dark">
    -  <button type="button" data-appearance="primary">Primary - Dark</button>
    -  <button type="button" data-appearance="primary">Primary Dark - destructive</button>
    - </div> -     +
    @@ -827,15 +866,19 @@
    - - <div data-theme="light">
    -  <button type="button" data-appearance="primary">Primary - Light</button>
    -  <button type="button" data-appearance="primary" - data-variant="destructive">Primary Light destructive</button> -
    - </div> -     + +

    Secondary button

    @@ -854,12 +897,14 @@ - - <div data-theme="dark">
    -  <button type="button" data-appearance="secondary">Secondary - Dark</button>
    - </div> -     + +
    @@ -877,12 +922,14 @@
    - - <div data-theme="light">
    -  <button type="button" data-appearance="secondary">Secondary - Light</button>
    - </div> -     + + @@ -914,22 +961,31 @@ > - - <div data-theme="dark">
    -  <div class="checkbox-container">
    -    <input class="checkbox-input" type="checkbox" - id="checkbox1" value="checkbox_one" />
    -    <label for="checkbox1" class="checkbox-hidden">Dark - checkbox</label>
    -  </div>
    -
    -  <div class="checkbox-container">
    -    <input class="checkbox-input" type="checkbox" - id="checkbox2" value="checkbox_second" />
    -    <label for="checkbox2" class="body-small">Dark - checkbox with label</label>
    -  </div> </div> -     +
    @@ -958,22 +1014,34 @@ >
    - - <div data-theme="light">
    -  <div class="checkbox-container">
    -    <input class="checkbox-input" type="checkbox" - id="checkbox3" value="third" />
    -    <label for="checkbox3" class="checkbox-hidden">Light - checkbox</label>
    -  </div>
    -
    -  <div class="checkbox-container">
    -    <input class="checkbox-input" type="checkbox" - id="checkbox4" value="checkbox_fourth" />
    -    <label for="checkbox4" class="body-small">Light - checkbox with label</label>
    -  </div> </div> -     + + @@ -1012,28 +1080,41 @@ - - <div data-theme="dark">
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="quokka" - name="animal" value="quokka">
    -   <label class="radio-label" - for="quokka">quokka</label>
    -  </div>
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="capybara" - name="animal" value="capybara">
    -   <label class="radio-label" - for="capybara">capybara</label>
    -  </div>
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="goat" - name="animal" value="goat">
    -   <label class="radio-label" - for="goat">goat</label>
    -  </div>
    - </div> -     + +
    @@ -1069,28 +1150,41 @@
    - - <div data-theme="light">
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="rabbit" - name="small-animals" value="rabbit">
    -   <label class="radio-label" - for="rabbit">rabbit</label>
    -  </div>
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="mouse" - name="small-animals" value="mouse">
    -   <label class="radio-label" - for="mouse">mouse</label>
    -  </div>
    -  <div class="radio-container">
    -   <input type="radio" class="radio-input" id="chinchilla" - name="small-animals" value="chinchilla">
    -   <label class="radio-label" - for="chinchilla">chinchilla</label>
    -  </div>
    - </div> -     + +
    diff --git a/apps/example-styles/src/app/app.element.ts b/apps/example-styles/src/app/app.element.ts index 0fe1884..5990375 100644 --- a/apps/example-styles/src/app/app.element.ts +++ b/apps/example-styles/src/app/app.element.ts @@ -7,6 +7,30 @@ export class AppElement extends HTMLElement { connectedCallback() { this.innerHTML = html; + + Array.from(this.querySelectorAll('template')).forEach((el: HTMLElement) => { + const pre = document.createElement('pre'); + const code = document.createElement('code'); + code.classList.add('language-html'); + const removeLineIndentation = el.innerHTML.replaceAll( + this.getIndentationSize(el.innerHTML), + '' + ); + + code.textContent = removeLineIndentation; + + pre.appendChild(code); + + el.parentNode?.appendChild(pre); + el.remove(); + }); + + (window as any).hljs.highlightAll(); + } + + getIndentationSize(str: string) { + const size = str.length - str.trimStart().length; + return ' '.repeat(size - 1); } } customElements.define('app-root', AppElement); diff --git a/libs/plugins-styles/README.md b/libs/plugins-styles/README.md index 7cc0dfe..f42c1d5 100644 --- a/libs/plugins-styles/README.md +++ b/libs/plugins-styles/README.md @@ -10,6 +10,14 @@ Install the package: npm install @penpot/plugin-styles ``` +Import the CSS file into your project: + ```css @import '@penpot/plugin-styles/styles.css'; ``` + +### Usage + +For detailed examples and to see how to use the styles and components, visit the documentation at: + +[Penpot Plugin Styles Documentation](https://penpot.github.io/penpot-plugins/)