diff --git a/plugins-styles/src/examples.css b/plugins-styles/src/examples.css index 61d2b68..c75c42e 100644 --- a/plugins-styles/src/examples.css +++ b/plugins-styles/src/examples.css @@ -1,3 +1,10 @@ +@import url("styles.css"); + +html, body { + margin: 0; + padding: 0; +} + ul { list-style: none; margin: 0; @@ -5,13 +12,14 @@ ul { } .color-section { + background: var(--app-black); + color: var(--app-white); display: flex; flex-wrap: wrap; + gap: 80px; list-style: none; - padding-left: 0; + padding: 10px 30px; width: 100%; - gap: 20px; - justify-content: space-between; } .color { @@ -23,6 +31,8 @@ ul { .color-preview { block-size: 35px; + border: 1px solid #8F9DA3; + border-radius: 4px; display: block; inline-size: 35px; margin-inline-start: 10px; diff --git a/plugins-styles/src/examples.html b/plugins-styles/src/examples.html index 89ac009..0a21c70 100644 --- a/plugins-styles/src/examples.html +++ b/plugins-styles/src/examples.html @@ -1,113 +1,256 @@ - - - - - + + + + + +

Plugins styles

+
-

Examples

+

Colors

+ -

Colors

- +

Fonts

-

Fonts

+

Buttons

+ -

Buttons

-
- - -
+ -
- - -
+ - + +
+ diff --git a/plugins-styles/src/lib/components/button.css b/plugins-styles/src/lib/components/button.css index bc276b8..5f268b9 100644 --- a/plugins-styles/src/lib/components/button.css +++ b/plugins-styles/src/lib/components/button.css @@ -1,16 +1,48 @@ button { border: 0; + font-weight: 500; + font-size: 12px; border-radius: 8px; + line-height: 1.2; padding: 8.5px 24px 8.5px 24px; text-transform: uppercase; + + &:hover:not(:disabled) { + cursor: pointer; + } } [data-theme="dark"] { [data-appearance="primary"]:is(button) { background-color: var(--da-primary); + + &:hover { + background-color: var(--da-tertiary); + } + + &:focus { + border: 2px solid var(--da-primary); + } + + &:disabled { + background-color: transparent; + border: 1px solid var(--db-quaternary); + color: var(--df-secondary); + } &[data-variant="destructive"] { background-color: var(--error-500); + + &:focus { + background-color: var(--app-red); + border: 2px solid var(--error-950); + } + + &:disabled { + background-color: transparent; + border: 1px solid var(--error-950); + color: var(--df-secondary); + } } } diff --git a/plugins-styles/src/lib/core/fonts.css b/plugins-styles/src/lib/core/fonts.css new file mode 100644 index 0000000..667056c --- /dev/null +++ b/plugins-styles/src/lib/core/fonts.css @@ -0,0 +1,55 @@ +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400+500&display=swap'); + +:root { + /* Font weight */ + --font-weight-regular: 400; + --font-weight-medium: 500; +} + +html, body { + font-family: 'Work Sans', sans-serif; + font-optical-sizing: auto; + font-style: normal; +} + +.display { + font-weight: 400; + font-size: 36px; + line-height: 1.2; +} + +.title-small { + font-weight: 400; + font-size: 14px; + line-height: 1.2; +} + +.title-medium { + font-weight: 400; + font-size: 20px; + line-height: 1.2; +} + +.title-large { + font-weight: 400; + font-size: 24px; + line-height: 1.1; +} + +.body-small { + font-weight: 400; + font-size: 12px; + line-height: 1.4; +} + +.body-medium { + font-weight: 400; + font-size: 14px; + line-height: 1.5; +} + +.body-large { + font-weight: 400; + font-size: 16px; + line-height: 1.5; +} diff --git a/plugins-styles/src/lib/styles.css b/plugins-styles/src/lib/styles.css index f6d08a3..8d6cc59 100644 --- a/plugins-styles/src/lib/styles.css +++ b/plugins-styles/src/lib/styles.css @@ -2,4 +2,5 @@ @import url("components/button.css"); /*core*/ +@import url("core/fonts.css"); @import url("core/swatches.css"); \ No newline at end of file