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 0000000..317ebcb Binary files /dev/null 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 new file mode 100644 index 0000000..0345cb7 --- /dev/null +++ b/apps/example-styles/src/app/app.element.css @@ -0,0 +1,98 @@ + +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); +} + +.title-margin { + margin-block-end: var(--spacing-16); +} + +/* 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/apps/example-styles/src/app/app.element.spec.ts b/apps/example-styles/src/app/app.element.spec.ts new file mode 100644 index 0000000..8ebca3c --- /dev/null +++ b/apps/example-styles/src/app/app.element.spec.ts @@ -0,0 +1,21 @@ +import { AppElement } from './app.element'; + +describe('AppElement', () => { + 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

+ +
+ +
+

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

+ +
+ +
+

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;