From 5da6a750f1fa3c99a801a4b800312729eb11ff23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Tue, 27 Feb 2024 11:48:27 +0100 Subject: [PATCH] feat: plugins styles --- apps/example-styles/.babelrc | 3 + apps/example-styles/.eslintrc.json | 18 + apps/example-styles/.swcrc | 8 + apps/example-styles/index.html | 16 + apps/example-styles/project.json | 8 + apps/example-styles/public/favicon.ico | Bin 0 -> 15086 bytes apps/example-styles/src/app/app.element.css | 98 +++ .../src/app/app.element.spec.ts | 21 + apps/example-styles/src/app/app.element.ts | 677 +++++++++++++++++ apps/example-styles/src/assets/.gitkeep | 0 apps/example-styles/src/main.ts | 1 + apps/example-styles/src/styles.css | 1 + apps/example-styles/tsconfig.app.json | 9 + apps/example-styles/tsconfig.json | 30 + apps/example-styles/tsconfig.spec.json | 26 + apps/example-styles/vite.config.ts | 49 ++ libs/plugins-styles/src/examples.css | 95 --- libs/plugins-styles/src/examples.html | 680 ------------------ .../src/lib/components/button.css | 98 ++- .../src/lib/components/checkbox.css | 4 +- libs/plugins-styles/src/lib/core/generic.css | 24 + libs/plugins-styles/src/lib/core/swatches.css | 1 + 22 files changed, 1070 insertions(+), 797 deletions(-) create mode 100644 apps/example-styles/.babelrc create mode 100644 apps/example-styles/.eslintrc.json create mode 100644 apps/example-styles/.swcrc create mode 100644 apps/example-styles/index.html create mode 100644 apps/example-styles/project.json create mode 100644 apps/example-styles/public/favicon.ico create mode 100644 apps/example-styles/src/app/app.element.css create mode 100644 apps/example-styles/src/app/app.element.spec.ts create mode 100644 apps/example-styles/src/app/app.element.ts create mode 100644 apps/example-styles/src/assets/.gitkeep create mode 100644 apps/example-styles/src/main.ts create mode 100644 apps/example-styles/src/styles.css create mode 100644 apps/example-styles/tsconfig.app.json create mode 100644 apps/example-styles/tsconfig.json create mode 100644 apps/example-styles/tsconfig.spec.json create mode 100644 apps/example-styles/vite.config.ts delete mode 100644 libs/plugins-styles/src/examples.css delete mode 100644 libs/plugins-styles/src/examples.html diff --git a/apps/example-styles/.babelrc b/apps/example-styles/.babelrc new file mode 100644 index 0000000..f2f3806 --- /dev/null +++ b/apps/example-styles/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@nx/js/babel"] +} diff --git a/apps/example-styles/.eslintrc.json b/apps/example-styles/.eslintrc.json new file mode 100644 index 0000000..9d9c0db --- /dev/null +++ b/apps/example-styles/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/apps/example-styles/.swcrc b/apps/example-styles/.swcrc new file mode 100644 index 0000000..a2d5b04 --- /dev/null +++ b/apps/example-styles/.swcrc @@ -0,0 +1,8 @@ +{ + "jsc": { + "parser": { + "syntax": "typescript" + }, + "target": "es2016" + } +} diff --git a/apps/example-styles/index.html b/apps/example-styles/index.html new file mode 100644 index 0000000..4efdbe2 --- /dev/null +++ b/apps/example-styles/index.html @@ -0,0 +1,16 @@ + + + + + ExampleStyles + + + + + + + + + + + diff --git a/apps/example-styles/project.json b/apps/example-styles/project.json new file mode 100644 index 0000000..578a8d2 --- /dev/null +++ b/apps/example-styles/project.json @@ -0,0 +1,8 @@ +{ + "name": "example-styles", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/example-styles/src", + "tags": [], + "targets": {} +} diff --git a/apps/example-styles/public/favicon.ico b/apps/example-styles/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57 GIT binary patch literal 15086 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 { + let app: AppElement; + + beforeEach(() => { + app = new AppElement(); + }); + + it('should create successfully', () => { + expect(app).toBeTruthy(); + }); + + it('should have a greeting', () => { + app.connectedCallback(); + + expect(app.querySelector('h1').innerHTML).toContain( + 'Welcome example-styles' + ); + }); +}); diff --git a/apps/example-styles/src/app/app.element.ts b/apps/example-styles/src/app/app.element.ts new file mode 100644 index 0000000..f8d7a7e --- /dev/null +++ b/apps/example-styles/src/app/app.element.ts @@ -0,0 +1,677 @@ +import 'plugins-styles/lib/styles.css'; +import './app.element.css'; + +export class AppElement extends HTMLElement { + public static observedAttributes = []; + + connectedCallback() { + this.innerHTML = ` +

Plugins styles

+
+
+

Colors

+
    +
  • +

    Background

    +
      +
    • + --db-primary + +
      • +
    • + --db-secondary + +
      • +
    • + --db-tertiary + +
      • +
    • + --db-quaternary + +
      • +
    +
      +
    • + --lb-primary + +
      • +
    • + --lb-secondary + +
      • +
    • + --lb-tertiary + +
      • +
    • + --lb-quaternary + +
      • +
    +
    • +
  • +

    Foreground

    +
      +
    • + --df-primary + +
      • +
    • + --df-secondary + +
      • +
    +
      +
    • + --lf-primary + +
      • +
    • + --lf-secondary + +
      • +
    +
    • +
  • +

    Accent

    +
      +
    • + --da-primary + +
      • +
    • + --da-primary-muted + +
      • +
    • + --da-secondary + +
      • +
    • + --da-tertiary + +
      • +
    • + --da-quaternary + +
      • +
    +
      +
    • + --la-primary + +
      • +
    • + --la-primary-muted + +
      • +
    • + --la-seconlary + +
      • +
    • + --la-tertiary + +
      • +
    • + --la-quaternary + +
      • +
    +
    • +
  • +

    Status color

    +
      +
    • + --success-50 + +
      • +
    • + --success-500 + +
      • +
    • + --success-950 + +
      • +
    • + --warning-50 + +
      • +
    • + --warning-500 + +
      • +
    • + --warning-950 + +
      • +
    • + --error-50 + +
      • +
    • + --error-500 + +
      • +
    • + --error-950 + +
      • +
    • + --info-50 + +
      • +
    • + --info-500 + +
      • +
    • + --info-950 + +
      • +
    +
    • +
  • +

    App color

    +
      +
    • + --app-white + +
      • +
    • + --app-black + +
      • +
    • + --app-pink + +
      • +
    • + --app-blue + +
      • +
    • + --app-gold + +
      • +
    • + --app-indigo + +
      • +
    • + --app-red + +
      • +
    • + --app-yellow + +
      • +
    • + --app-purple + +
      • +
    • + --app-lemon + +
      • +
    • + --app-orange + +
      • +
    +
    • +
+
+ +
+

Fonts

+

Display

+

Title L

+

Title M

+

Title S

+

Headline L

+

Headline M

+

Headline S

+

Body large

+

Body medium

+

Body small

+

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>
+ +
+ +
+

Spacing

+
    +
  • + --spacing-4 + +
    • +
  • + --spacing-8 + +
    • +
  • + --spacing-12 + +
    • +
  • + --spacing-16 + +
    • +
  • + --spacing-20 + +
    • +
  • + --spacing-24 + +
    • +
  • + --spacing-28 + +
    • +
  • + --spacing-32 + +
    • +
  • + --spacing-36 + +
    • +
  • + --spacing-40 + +
    • +
+
+ +
+

Icons

+
+ + + + + + + + + + + + + + + + + + + + +
+ + <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> + +
+ +
+

Select

+
+
+
+ + +
+
+ + <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> + +
+
+ +
+

Input

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + <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> + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + <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> + +
+
+ +
+

Buttons

+

Primary button

+
+
+
    +
    • +
    • +
+
    +
    • +
    • +
+
+ + + <div data-theme="dark">
+  <button type="button" data-appearance="primary">Primary Dark</button>
+  <button type="button" data-appearance="primary">Primary Dark destructive</button>
+ </div> + +
+ +
+
+
    +
    • +
    • +
+
    +
    • +
    • +
+
+ + <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

+
+
+
    +
    • +
    • +
+
+ + <div data-theme="dark">
+  <button type="button" data-appearance="secondary">Secondary Dark</button>
+ </div> + +
+ +
+
+
    +
    • +
    • +
+
+ + <div data-theme="light">
+  <button type="button" data-appearance="secondary">Secondary Light</button>
+ </div> + +
+
+ +
+

Checkox

+
+
+
+ + +
+
+ + +
+
+ + <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> + +
+ +
+
+
+ + +
+ +
+ + <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> + +
+
+ +
+

Radio button

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + <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> + +
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + <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> + +
+
+ +
+ `; + } +} +customElements.define('app-root', AppElement); diff --git a/apps/example-styles/src/assets/.gitkeep b/apps/example-styles/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/example-styles/src/main.ts b/apps/example-styles/src/main.ts new file mode 100644 index 0000000..fdb879d --- /dev/null +++ b/apps/example-styles/src/main.ts @@ -0,0 +1 @@ +import './app/app.element'; diff --git a/apps/example-styles/src/styles.css b/apps/example-styles/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/apps/example-styles/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/apps/example-styles/tsconfig.app.json b/apps/example-styles/tsconfig.app.json new file mode 100644 index 0000000..3253fc8 --- /dev/null +++ b/apps/example-styles/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node"] + }, + "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] +} diff --git a/apps/example-styles/tsconfig.json b/apps/example-styles/tsconfig.json new file mode 100644 index 0000000..cee4bba --- /dev/null +++ b/apps/example-styles/tsconfig.json @@ -0,0 +1,30 @@ +{ + "extends": "../../tsconfig.base.json", + "files": [], + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "skipLibCheck": true, + "types": ["vite/client"] + }, + "include": ["src"], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/apps/example-styles/tsconfig.spec.json b/apps/example-styles/tsconfig.spec.json new file mode 100644 index 0000000..3c002c2 --- /dev/null +++ b/apps/example-styles/tsconfig.spec.json @@ -0,0 +1,26 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "vitest/globals", + "vitest/importMeta", + "vite/client", + "node", + "vitest" + ] + }, + "include": [ + "vite.config.ts", + "vitest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ] +} diff --git a/apps/example-styles/vite.config.ts b/apps/example-styles/vite.config.ts new file mode 100644 index 0000000..6502209 --- /dev/null +++ b/apps/example-styles/vite.config.ts @@ -0,0 +1,49 @@ +/// +import { defineConfig } from 'vite'; + +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/apps/example-styles', + + server: { + port: 4200, + host: 'localhost', + }, + + preview: { + port: 4300, + host: 'localhost', + }, + + plugins: [nxViteTsPaths()], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + build: { + outDir: '../../dist/apps/example-styles', + reportCompressedSize: true, + commonjsOptions: { + transformMixedEsModules: true, + }, + }, + + test: { + globals: true, + cache: { + dir: '../../node_modules/.vitest', + }, + environment: 'jsdom', + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/apps/example-styles', + provider: 'v8', + }, + }, +}); diff --git a/libs/plugins-styles/src/examples.css b/libs/plugins-styles/src/examples.css deleted file mode 100644 index 1ca05dc..0000000 --- a/libs/plugins-styles/src/examples.css +++ /dev/null @@ -1,95 +0,0 @@ -@import url("lib/styles.css"); - -html, body { - background: var(--app-black); - color: var(--app-white); - margin: 0 var(--spacing-20); -} - -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); -} - -.theme-group { - border-radius: var(--spacing-20); - margin-block-end: var(--spacing-20); - padding: var(--spacing-32); - - &[data-theme="dark"] { - border: 1px solid var(--db-quaternary); - } - - &[data-theme="light"] { - border: 1px solid var(--lb-quaternary); - } -} - -.component-section { - margin-block-end: var(--spacing-40); - } - - /* COLOR */ -.color-section { - display: flex; - flex-wrap: wrap; - gap: calc(var(--spacing-40) * 2); - list-style: none; - width: 100%; -} - -.color { - align-items: center; - display: flex; - justify-content: space-between; - margin-block-end: var(--spacing-16); -} - -.color-preview { - block-size: var(--spacing-36); - border: 1px solid #8F9DA3; - border-radius: var(--spacing-4); - display: block; - inline-size: var(--spacing-36); - margin-inline-start: var(--spacing-16); -} - -/* SPACING */ -.spacing-group { - display: grid; - margin-block-end: var(--spacing-16); - grid-template-columns: calc(var(--spacing-4) * 30) 1fr; -} - -.spacing-label { - margin-inline-end: var(--spacing-24); -} - -.spacing-preview { - background-color: var(--error-500); -} - - /* INPUT / BUTTONS */ - .inputs-list, - .button-list { - display: flex; - gap: var(--spacing-20); - - &:not(:last-child) { - margin-block-end: var(--spacing-20); - } -} - -/* ICON */ -.icons-section { - display: flex; - gap: var(--spacing-8); -} \ No newline at end of file diff --git a/libs/plugins-styles/src/examples.html b/libs/plugins-styles/src/examples.html deleted file mode 100644 index e443f8b..0000000 --- a/libs/plugins-styles/src/examples.html +++ /dev/null @@ -1,680 +0,0 @@ - - - - - - - -

Plugins styles

-
-
-

Colors

-
    -
  • -

    Background

    -
    Dark
    -
      -
    • - --db-primary - -
      • -
    • - --db-secondary - -
      • -
    • - --db-tertiary - -
      • -
    • - --db-quaternary - -
      • -
    -
    Light
    -
      -
    • - --lb-primary - -
      • -
    • - --lb-secondary - -
      • -
    • - --lb-tertiary - -
      • -
    • - --lb-quaternary - -
      • -
    -
    • -
  • -

    Foreground

    -
    Dark
    -
      -
    • - --df-primary - -
      • -
    • - --df-secondary - -
      • -
    -
    Light
    -
      -
    • - --lf-primary - -
      • -
    • - --lf-secondary - -
      • -
    -
    • -
  • -

    Accent

    -
    Dark
    -
      -
    • - --da-primary - -
      • -
    • - --da-primary-muted - -
      • -
    • - --da-secondary - -
      • -
    • - --da-tertiary - -
      • -
    • - --da-quaternary - -
      • -
    -
    Light
    -
      -
    • - --la-primary - -
      • -
    • - --la-primary-muted - -
      • -
    • - --la-seconlary - -
      • -
    • - --la-tertiary - -
      • -
    • - --la-quaternary - -
      • -
    -
    • -
  • -

    Status color

    -
      -
    • - --success-50 - -
      • -
    • - --success-500 - -
      • -
    • - --success-950 - -
      • -
    • - --warning-50 - -
      • -
    • - --warning-500 - -
      • -
    • - --warning-950 - -
      • -
    • - --error-50 - -
      • -
    • - --error-500 - -
      • -
    • - --error-950 - -
      • -
    • - --info-50 - -
      • -
    • - --info-500 - -
      • -
    • - --info-950 - -
      • -
    -
    • -
  • -

    App color

    -
      -
    • - --app-white - -
      • -
    • - --app-black - -
      • -
    • - --app-pink - -
      • -
    • - --app-blue - -
      • -
    • - --app-gold - -
      • -
    • - --app-indigo - -
      • -
    • - --app-red - -
      • -
    • - --app-yellow - -
      • -
    • - --app-purple - -
      • -
    • - --app-lemon - -
      • -
    • - --app-orange - -
      • -
    -
    • -
-
- -
-

Fonts

-

Display

-

Title L

-

Title M

-

Title S

-

Headline L

-

Headline M

-

Headline S

-

Body large

-

Body medium

-

Body small

-

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>
- -
- -
-

Spacing

-
    -
  • - --spacing-4 - -
    • -
  • - --spacing-8 - -
    • -
  • - --spacing-12 - -
    • -
  • - --spacing-16 - -
    • -
  • - --spacing-20 - -
    • -
  • - --spacing-24 - -
    • -
  • - --spacing-28 - -
    • -
  • - --spacing-32 - -
    • -
  • - --spacing-36 - -
    • -
  • - --spacing-40 - -
    • -
-
- -
-

Icons

-
- - - - - - - - - - - - - - - - - - - - -
- - <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> - -
- -
-

Select

-
-
-
- - -
-
- - <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> - -
-
- -
-

Input

-
-
-
-
- - -
-
- - -
-
- - -
-
-
- - <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> - -
-
-
-
-
- - -
-
- - -
-
- - -
-
-
- - <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> - -
-
- -
-

Buttons

-

Primary button

-
-
-
    -
    • -
    • -
-
    -
    • -
    • -
-
- - - <div data-theme="dark">
-  <button type="button" data-appearance="primary">Primary Dark</button>
-  <button type="button" data-appearance="primary">Primary Dark destructive</button>
- </div> - -
- -
-
-
    -
    • -
    • -
-
    -
    • -
    • -
-
- - <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

-
-
-
    -
    • -
    • -
-
- - <div data-theme="dark">
-  <button type="button" data-appearance="secondary">Secondary Dark</button>
- </div> - -
- -
-
-
    -
    • -
    • -
-
- - <div data-theme="light">
-  <button type="button" data-appearance="secondary">Secondary Light</button>
- </div> - -
-
- -
-

Checkox

-
-
-
- - -
-
- - -
-
- - <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> - -
- -
-
-
- - -
- -
- - <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> - -
-
- -
-

Radio button

-
-
-
- - -
-
- - -
-
- - -
-
- - <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> - -
- -
-
-
- - -
-
- - -
-
- - -
-
- - <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/libs/plugins-styles/src/lib/components/button.css b/libs/plugins-styles/src/lib/components/button.css index 3be757c..d98f13d 100644 --- a/libs/plugins-styles/src/lib/components/button.css +++ b/libs/plugins-styles/src/lib/components/button.css @@ -4,7 +4,7 @@ button { font-size: 12px; border-radius: 8px; line-height: 1.2; - padding: 8.5px 24px 8.5px 24px; + padding: 8px 24px 8px 24px; text-transform: uppercase; &:hover:not(:disabled) { @@ -19,13 +19,22 @@ button { [data-theme="dark"] { [data-appearance="primary"]:is(button) { background-color: var(--da-primary); + border: 1px solid var(--da-primary); + outline: 2px solid transparent; &:hover:not(:disabled) { background-color: var(--da-tertiary); + border: 1px solid var(--da-tertiary); } - &:focus, &:focus-visible { - border:1px solid var(--da-tertiary); + &:focus:not(:disabled), &:focus-visible:not(:disabled) { + border: 1px solid var(--db-primary); + outline: 2px solid var(--da-primary); + } + + &:active:not(:disabled) { + border: 1px solid var(--da-primary); + outline: 2px solid var(--da-tertiary); } &:disabled { @@ -36,14 +45,23 @@ button { &[data-variant="destructive"] { background-color: var(--error-500); + border: 1px solid var(--error-500); + outline: 2px solid transparent; &:hover:not(:disabled) { - background-color: var(--error-500); + background-color: var(--error-700); + border: 1px solid var(--error-700); } - &:focus, &:focus-visible { + &:focus:not(:disabled), &:focus-visible:not(:disabled) { + border: 1px solid var(--db-primary); + outline: 2px solid var(--error-500); + } + + &:active:not(:disabled) { background-color: var(--app-red); - border: 1px solid var(--error-950); + border: 1px solid var(--app-red); + outline: 2px solid var(--error-700); } &:disabled { @@ -63,10 +81,15 @@ button { color: var(--da-primary); } - &:focus, &:focus-visible { + &:focus:not(:disabled), &:focus-visible:not(:disabled) { border: 1px solid var(--da-primary); } + &:active:not(:disabled) { + color: var(--da-primary); + outline: 2px solid var(--db-quaternary); + } + &:disabled { background-color: transparent; border: 1px solid var(--db-quaternary); @@ -79,6 +102,20 @@ button { background-color: var(--la-primary); color: var(--lb-primary); + &:hover:not(:disabled) { + background-color: var(--la-tertiary); + } + + &:focus:not(:disabled), &:focus-visible:not(:disabled) { + border: 1px solid var(--lb-primary); + outline: 2px solid var(--la-primary); + } + + &:active:not(:disabled) { + border: 1px solid var(--la-primary); + outline: 2px solid var(--la-tertiary); + } + &:disabled { background-color: transparent; border: 1px solid var(--lb-quaternary); @@ -86,22 +123,35 @@ button { } &[data-variant="destructive"] { - background-color: var(--error-500); + background-color: transparent; + border: 1px solid var(--error-200); + color: var(--lf-secondary); + + &:hover:not(:disabled) { + background-color: var(--error-500); + color: var(--lb-secondary); + border: 1px solid var(--lb-primary); + outline: 2px solid var(--error-500); + } + + &:focus:not(:disabled), &:focus-visible:not(:disabled) { + background-color: var(--error-700); + border: 1px solid var(--error-700); + color: var(--lb-secondary); + outline: 2px solid var(--error-700); + } + + &:active:not(:disabled) { + background-color: var(--app-red); + color: var(--lb-primary); + outline: 2px solid var(--error-700); + } &:disabled { - background-color: transparent; - border: 1px solid var(--error-200); - color: var(--lf-secondary); + background-color: var(--error-500); + color: var(--lb-secondary); } } - - &:hover:not(:disabled) { - background-color: var(--la-tertiary); - } - - &:focus, &:focus-visible { - border: 1px solid var(--la-tertiary); - } } [data-appearance="secondary"]:is(button) { @@ -113,12 +163,20 @@ button { color: var(--la-primary); } - &:focus, &:focus-visible { + &:focus:not(:disabled), &:focus-visible:not(:disabled) { background-color: var(--lb-tertiary); border: 1px solid var(--la-primary); + color: var(--lf-secondary); + } + + &:active:not(:disabled) { + background-color: var(--lb-tertiary); + color: var(--la-primary); + outline: 2px solid var(--lb-quaternary); } &:disabled { + background-color: transparent; border: 1px solid var(--lb-quaternary); } } diff --git a/libs/plugins-styles/src/lib/components/checkbox.css b/libs/plugins-styles/src/lib/components/checkbox.css index d10f263..c796133 100644 --- a/libs/plugins-styles/src/lib/components/checkbox.css +++ b/libs/plugins-styles/src/lib/components/checkbox.css @@ -19,12 +19,12 @@ transition: 120ms all ease-in-out; &::after { - block-size: 6px; + block-size: 8px; border-style: solid; border-width: 0; content: ""; display: flex; - inline-size: 3px; + inline-size: 5px; margin-block-start: 2px; margin-inline-start: 5px; -webkit-transform: rotate(45deg); diff --git a/libs/plugins-styles/src/lib/core/generic.css b/libs/plugins-styles/src/lib/core/generic.css index 97ba722..3338c1f 100644 --- a/libs/plugins-styles/src/lib/core/generic.css +++ b/libs/plugins-styles/src/lib/core/generic.css @@ -1,8 +1,30 @@ html, body { + font-family: 'Work Sans', sans-serif; + font-optical-sizing: auto; + font-style: normal; margin: 0; padding: 0; } +body, +h1, +h2, +h3, +h4, +h5, +p, +pre { + margin: 0; +} + +*, +::before, +::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; +} + ul { list-style: none; margin: 0; @@ -11,8 +33,10 @@ ul { [data-theme="dark"] { background-color: var(--db-primary); + color: var(--lb-primary); } [data-theme="light"] { background-color: var(--lb-primary); + color: var(--db-primary); } \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/core/swatches.css b/libs/plugins-styles/src/lib/core/swatches.css index af90529..2ea8532 100644 --- a/libs/plugins-styles/src/lib/core/swatches.css +++ b/libs/plugins-styles/src/lib/core/swatches.css @@ -53,6 +53,7 @@ --error-50: #fff0f3; --error-200: #ffcada; --error-500: #ff3277; + --error-700: #c80857; --error-950: #500124; --info-50: #f0f8ff; --info-500: #0e9be9;