diff --git a/documentation/tutorial/dom-style-guide.md b/documentation/tutorial/dom-style-guide.md deleted file mode 100644 index b650ea05fa604e47ddbb567c15ca4afe72b00bc5..0000000000000000000000000000000000000000 --- a/documentation/tutorial/dom-style-guide.md +++ /dev/null @@ -1,130 +0,0 @@ -# Style Guide - -The style guide reflects the patterns and components that are the foundation of the Monster System. - -These patterns provide a common language and a consistent look and feel when developing -applications and products within the Monster ecosystem. - -## CSS Properties - -Where possible, components should use global uniform CSS properties to create a consistent look and feel. - -With the following script, you can see the list of all the CSS properties that are available -in the Monster UI Framework. - -```bash -ag -o --nofilename 'var\(\-\-monster[^)]*\)' | grep var | cut -d"," -f1 | cut -d"(" -f2 | sort | uniq -``` - -Actually, the following CSS properties are in use: - - -```css - ---monster-accent-color ---monster-bg-color ---monster-border-color ---monster-border-radius ---monster-border-radius) ---monster-border-width ---monster-btn-bg-color ---monster-btn-border-color ---monster-btn-color ---monster-color ---monster-color-activity ---monster-color-failed ---monster-color-successful ---monster-disabled-background-color ---monster-disabled-border-color ---monster-disabled-color ---monster-empty-state-background-color ---monster-empty-state-layout-padding-margin-bottom ---monster-empty-state-margin-top ---monster-empty-state-padding-bottom ---monster-empty-state-padding-left ---monster-empty-state-padding-right ---monster-empty-state-padding-top ---monster-font-family ---monster-hover-color ---monster-message-bg-color ---monster-message-border-color ---monster-message-border-radius ---monster-message-border-style ---monster-message-border-width ---monster-message-color ---monster-message-margin-bottom ---monster-message-margin-left ---monster-message-margin-right ---monster-message-margin-top ---monster-message-padding-bottom ---monster-message-padding-left ---monster-message-padding-right ---monster-message-padding-top ---monster-notify-duration ---monster-popper-witharrrow-distance ---monster-selected-color -``` - - -### Colors - -[black, white, red, yellow, grey, pink, green](https://coolors.co/0a0f0d-ffffff-b00020-f6aa1c-656176-ff69b4-003d00) - - -| Code | Description | -|-------------------------------------------|--------------| -| var(--monster-color, #0a0f0d) | black | -| var(--monster-color-activity, #656176) | grey | -| var(--monster-color-failed, #b00020) | red | -| var(--monster-color-successful, #003d00) | green | -| var(--monster-color-accent, #ff69b4) | pink | -| var(--monster-color-dark, #0a0f0d) | black | -| var(--monster-color-light, #ffffff) | white | -| var(--monster-color-hover, #ff69b4) | pink | -| var(--monster-color-highlight, f6aa1c) | yellow | -| var(--monster-color-selected, #0a0f0d) | black | -| var(--monster-color-disabled, #656176) | grey | -| var(--monster-bg-color, #ffffff) | white | -| var(--monster-bg-color-dark, #656176) | grey | -| var(--monster-bg-color-light, #ffffff) | white | -| var(--monster-bg-color-disabled, #656176) | grey | -| var(--monster-disabled-color) | (deprecated) | -| var(--monster-disabled-bg-color) | (deprecated) | -| var(--monster-hover-color) | (deprecated) | -| var(--monster-selected-color) | (deprecated) | -| var(--monster-accent-color) | (deprecated) | -| var(--monster-disabled-background-color) | (deprecated) | - -### Fonts - -```css -font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); -``` - -| Property | Description | -|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------| -| var(--monster-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) | | -| var(--monster-font-size, calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) | | -| var(--monster-font-weight | | -| var(--monster-font-weight-bold | | -| var(--monster-font-weight-light | | -| var(--monster-line-height, calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300))); | | - - -### Borders - -| Property | Description | -|--------------------------------------|-------------| -| var(--monster-border-color, #0a0f0d) | black | -| var(--monster-border-radius, 0) | | -| var(--monster-border-style, solid) | | -| var(--monster-border-width, 2px) | | - -### Shadows - -| Property | Description | -|------------------------------------------------------------------------------------------------------------------------|-------------| -| var(--monster-text-shadow, none) | | -| var(--monster-box-shadow, box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;) | | - diff --git a/documentation/tutorial/tutorials.json b/documentation/tutorial/tutorials.json index d8dd74c3fc873cd2be5f4fd63bf9661b31bf3879..00375446f2764b1ed18f97e9fa8a647523cd960e 100644 --- a/documentation/tutorial/tutorials.json +++ b/documentation/tutorial/tutorials.json @@ -17,9 +17,6 @@ "dom-based-templating-implementation": { "title": "DOM-based templating implementation" }, - "dom-style-guide": { - "title": "Monster Style Guide" - }, "how-to-write-a-customcontrol": { "title": "How to write a CustomControl" }