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 317ebcb..d222231 100644 Binary files a/apps/example-styles/public/favicon.ico and b/apps/example-styles/public/favicon.ico differ diff --git a/apps/example-styles/src/app/app.element.css b/apps/example-styles/src/app/app.element.css index b605019..c842c10 100644 --- a/apps/example-styles/src/app/app.element.css +++ b/apps/example-styles/src/app/app.element.css @@ -5,17 +5,19 @@ body { margin: 0 var(--spacing-20); } +app-root { + display: block; + padding-block: var(--spacing-16); +} + section { border-bottom: 1px solid var(--app-white); padding-block: var(--spacing-32); -} -.code { - background-color: var(--app-white); - border-radius: var(--spacing-4); - color: var(--app-black); - display: block; - padding: var(--spacing-20); + &:last-child { + padding-block-end: 0; + border-bottom: 0; + } } .theme-group { @@ -34,6 +36,10 @@ section { .component-section { margin-block-end: var(--spacing-40); + + &:last-child { + margin-block-end: 0; + } } .title-margin { diff --git a/apps/example-styles/src/app/app.element.html b/apps/example-styles/src/app/app.element.html index 4a8c4a7..a6c1755 100644 --- a/apps/example-styles/src/app/app.element.html +++ b/apps/example-styles/src/app/app.element.html @@ -1,4 +1,4 @@ -

Plugins 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/)