diff --git a/addons/rose/README.md b/addons/rose/README.md index 896fd8f47..c61b25b72 100644 --- a/addons/rose/README.md +++ b/addons/rose/README.md @@ -11,6 +11,8 @@ Project Watchtower UIs. - [Installation](#installation) - [Yarn Commands](#yarn-commands) - [Linting](#linting) +- [Formatting](#formatting) +- [Building Components](#building-components) - [Running tests](#running-tests) - [Running the dummy application](#running-the-dummy-application) - [Contributing](#contributing) @@ -44,6 +46,7 @@ List of available project commands. `yarn run ` | format:js | Auto-formats `js` files using Prettier. | | format:sass | Auto-formats `scss` files using Prettier. | | start | Runs the dummy app local server. | +| storybook | Runs the Storybook local server on port 6006. Be sure to start the standard server (see above) in a separate terminal. | | test | Runs all tests. | | test:all | Runs tests across multiple Ember versions with ember-try. | | doc:toc | Automatically generates a table of contents for this README file. | @@ -63,6 +66,13 @@ Before submitting your work, be sure to run auto-formatters * `yarn format` +## Building Components + +To build a new component, start by generating it on the command line with +`ember g component rose/component-name`. Then manually add a Storybook story in +`stories/component-name.stories.js`. Use the Storybook UI during component +development (see Yarn commands). + ## Running tests * `yarn test` – Runs the test suite on the current Ember version diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss index 9e9909dd7..c94a3ec03 100644 --- a/addons/rose/addon/styles/rose/components/_button.scss +++ b/addons/rose/addon/styles/rose/components/_button.scss @@ -54,3 +54,83 @@ box-shadow: none, ) ); + +@include button.button-style( + 'warning', + ( + color: var(--failure), + background-color: var(--subtle), + border-color: var(--failure), + box-shadow: 0px 4px 4px rgba(var(--stark-components), var(--opacity-2)), + ), + ( + color: var(--white), + border-color: var(--failure-starker-1), + background-color: var(--failure), + box-shadow: ( + 0px 4px 4px rgba(var(--stark-components), var(--opacity-3)), + 0px 4px 8px rgba(var(--stark-components), var(--opacity-4)), + ), + text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)), + ), + ( + color: var(--white), + border-color: var(--ui-gray-starker-2), + background-color: var(--failure-starker-1), + box-shadow: ( + 0px 4px 4px rgba(var(--stark-components), var(--opacity-3)), + 0px 4px 8px rgba(var(--stark-components), var(--opacity-4)), + ), + text-shadow: 0px 1px 1px rgba(var(--black-components), var(--opacity-2)), + ), + ( + border-color: var(--ui-gray-subtler-2), + opacity: var(--opacity-1), + box-shadow: none, + ) +); + +@include button.button-style( + 'ghost', + ( + color: var(--info), + border-color: transparent, + background-color: var(--subtle) + ), + ( + background-color: var(--ui-gray-subtler-5), + ), + ( + background-color: var(--ui-gray-subtler-4), + ), + ( + opacity: var(--opacity-1), + ) +); + +.rose-button-inline-link-action { + color: var(--info); + border: 0; + background: none; + cursor: pointer; + margin: 0; + padding: 0; + display: inline; + font-size: 1rem; + font-weight: 600; + + &:not(:disabled) { + &:hover { + text-decoration: underline; + } + &:active { + color: var(--info-starker-1); + } + } + + &:disabled { + cursor: not-allowed; + opacity: var(--opacity-1); + } + +} diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss index b27db5a4e..42ca267fc 100644 --- a/addons/rose/addon/styles/rose/utilities/_button.scss +++ b/addons/rose/addon/styles/rose/utilities/_button.scss @@ -68,6 +68,9 @@ @if $disabled { &:disabled { cursor: not-allowed; + @if map.get($disabled, 'border-color') { + border-color: map.get($disabled, 'border-color'); + } @if map.get($disabled, 'opacity') { opacity: map.get($disabled, 'opacity'); } diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index aa6afa069..efd549ed6 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/addons/rose/addon/styles/rose/variables/color/_css.scss @@ -110,8 +110,8 @@ --failure-subtler-2: #{color(red, 900)}; --failure-subtler-1: #{color(red, 800)}; - --failure: #{color(red)}; - --failure-starker-1: #{color(red, 200)}; + --failure: #{color(red, 400)}; + --failure-starker-1: #{color(red, 300)}; --success-subtler-2: #{color(green, 900)}; --success-subtler-1: #{color(green, 800)}; diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss index 0adc3c887..1b11456b1 100644 --- a/addons/rose/addon/styles/rose/variables/color/_sass.scss +++ b/addons/rose/addon/styles/rose/variables/color/_sass.scss @@ -35,8 +35,10 @@ $color-values: ( 100: #ebeef2, 200: #dce0e6, 300: #bac1cc, + 400: #8e96a3, 500: map.get($colors, ui-gray), 600: #626873, + 700: #525761, 800: #373a42, 900: #1f2124, ), @@ -78,6 +80,9 @@ $color-values: ( red: ( 010: #fdfafb, 100: #efc7cc, + 200: #e5a2aa, + 300: #db7d88, + 400: #d15866, 500: map.get($colors, red), 800: #5b1820, ), diff --git a/addons/rose/stories/rose/button.stories.js b/addons/rose/stories/button.stories.js similarity index 93% rename from addons/rose/stories/rose/button.stories.js rename to addons/rose/stories/button.stories.js index c74e67b40..41498f0ea 100644 --- a/addons/rose/stories/rose/button.stories.js +++ b/addons/rose/stories/button.stories.js @@ -28,6 +28,7 @@ export const Normal = () => ({ secondary: 'secondary', warning: 'warning', ghost: 'ghost', + 'inline-link-action': 'inline-link-action', }, 'primary' ),