Merge pull request #1851 from smeup/ketchup_redesign

Ketchup redesign
smeup · Apr 8, 2024 · 3a7eae8 · 3a7eae8
2 parents 87fbab2 + ffa1e8a
commit 3a7eae8
Show file tree

Hide file tree

Showing 21 changed files with 257 additions and 213 deletions.
diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css
@@ -39,7 +39,7 @@
 
 code.flat {
   background: var(--kup-gray-color-10);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   border: 1px solid var(--kup-gray-color-30);
   color: var(--kup-gray-color-90);
   display: flex;

diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue
@@ -903,7 +903,7 @@ export default {
                 value: 'kup-token',
               },
             },
-            icon: 'token',
+            icon: 'dns',
             value: 'KupToken',
             visible: true,
           },

diff --git a/packages/ketchup/src/assets/nav-bar.js b/packages/ketchup/src/assets/nav-bar.js
@@ -41,8 +41,8 @@ dropdownEl.addEventListener('kup-dropdownbutton-itemclick', (e) => {
 switchEl.addEventListener('kup-switch-change', (e) => {
     console.log(e.type, e);
     if (e.detail.value === 'on') {
-        document.documentElement.ketchup.theme.set('dark');
+        document.documentElement.ketchup.theme.set('octane');
     } else {
-        document.documentElement.ketchup.theme.set('ketchup');
+        document.documentElement.ketchup.theme.set('darkGreyOctane');
     }
 });
diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
@@ -114,6 +114,38 @@ <h4>Neutral:</h4>
             disabled
         ></kup-button>
 
+        <h4>Danger:</h4>
+        <kup-button label="Raised" class="kup-danger"></kup-button>
+        <kup-button
+            label="Raised & Disabled"
+            class="kup-danger"
+            disabled
+        ></kup-button>
+        <kup-button
+            label="Outlined"
+            class="kup-danger"
+            styling="outlined"
+        ></kup-button>
+        <kup-button
+            label="Outlined & Disabled"
+            class="kup-danger"
+            styling="outlined"
+            disabled
+        ></kup-button>
+        <kup-button label="Flat" class="kup-danger" styling="flat"></kup-button>
+        <kup-button
+            label="Flat"
+            class="kup-danger"
+            styling="flat"
+            icon="favorite"
+        ></kup-button>
+        <kup-button
+            label="Flat & Disabled"
+            class="kup-danger"
+            styling="flat"
+            disabled
+        ></kup-button>
+
         <h4>Styling:</h4>
         <kup-button label="Raised"></kup-button>
         <kup-button label="Raised & disabled" disabled></kup-button>
@@ -237,8 +269,7 @@ <h4>All variants:</h4>
             ></kup-spinner>
         </kup-button>
         <hr />
-        <kup-button class="kup-danger" label="danger"></kup-button>
-        <kup-button class="kup-success" label="danger"></kup-button>
+
         <script>
             document.addEventListener('kup-manager-ready', () => {
                 const kupManager = document.documentElement.ketchup;

diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
@@ -61,7 +61,7 @@
 
     .box {
       background-color: var(--kup_box_background_color);
-      border-radius: var(--kup-radius-01);
+      border-radius: var(--kup-radius-00);
       flex-grow: 1;
       cursor: pointer;
       position: relative;

diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
@@ -17,7 +17,7 @@
     0px 3px 6px 0 rgba(0, 0, 0, 0.3)
   );
   background-color: var(--kup_card_background_color);
-  border-radius: var(--kup-radius-01);
+  border-radius: var(--kup-radius-00);
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
     0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);

diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
@@ -5,15 +5,15 @@
 :host(.#{$kup-class-shaped}) {
   .dropdown-button__primary-action {
     .button {
-      border-top-left-radius: var(--kup-radius-01);
-      border-bottom-left-radius: var(--kup-radius-01);
+      border-top-left-radius: var(--kup-radius-00);
+      border-bottom-left-radius: var(--kup-radius-00);
     }
   }
 
   .dropdown-button__dropdown-action {
     .button {
-      border-top-right-radius: var(--kup-radius-01);
-      border-bottom-right-radius: var(--kup-radius-01);
+      border-top-right-radius: var(--kup-radius-00);
+      border-bottom-right-radius: var(--kup-radius-00);
     }
   }
 }

diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
@@ -26,15 +26,15 @@
 
 .f-button.dropdown-button__dropdown-action.dropdown-only {
   .button {
-    border-top-left-radius: var(--kup-radius-01);
-    border-bottom-left-radius: var(--kup-radius-01);
+    border-top-left-radius: var(--kup-radius-00);
+    border-bottom-left-radius: var(--kup-radius-00);
   }
 }
 
 .f-button.dropdown-button__dropdown-action {
   .button {
-    border-top-left-radius: var(--kup-radius-01);
-    border-bottom-left-radius: var(--kup-radius-01);
+    border-top-left-radius: var(--kup-radius-00);
+    border-bottom-left-radius: var(--kup-radius-00);
     box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 
     .button__icon {

diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md
@@ -2,26 +2,29 @@
 
 <!-- Auto Generated Below -->
 
+
 ## Properties
 
-| Property | Attribute | Description | Type | Default |
-| --- | --- | --- | --- | --- |
-| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `4` |
-| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` |
-| `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` |
-| `rows` | `rows` | Number of rows to display in the grid layout. | `number` | `null` |
-| `selectedNode` | -- | An array of integers containing the path to a selected child.\  | `number[]` | `[]` |
-| `stateId` | `state-id` |  | `string` | `''` |
-| `store` | -- |  | `KupStore` | `undefined` |
+| Property       | Attribute      | Description                                                      | Type                     | Default     |
+| -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- |
+| `columns`      | `columns`      | Number of columns to display in the grid layout.                 | `number`                 | `null`      |
+| `customStyle`  | `custom-style` | Custom style of the component.                                   | `string`                 | `''`        |
+| `data`         | --             | Actual data of the component.                                    | `KupImageListDataNode[]` | `[]`        |
+| `ripple`       | `ripple`       | When enabled displays Material's ripple effect on clicked items. | `boolean`                | `false`     |
+| `rows`         | `rows`         | Number of rows to display in the grid layout.                    | `number`                 | `null`      |
+| `selectedNode` | --             | An array of integers containing the path to a selected child.\   | `number[]`               | `[]`        |
+| `stateId`      | `state-id`     |                                                                  | `string`                 | `''`        |
+| `store`        | --             |                                                                  | `KupStore`               | `undefined` |
+
 
 ## Events
 
-| Event | Description | Type |
-| --- | --- | --- |
-| `kup-imagelist-click` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-contextmenu` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-dblclick` |  | `CustomEvent<KupImageListEventPayload>` |
+| Event                       | Description | Type                                    |
+| --------------------------- | ----------- | --------------------------------------- |
+| `kup-imagelist-click`       |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-contextmenu` |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-dblclick`    |             | `CustomEvent<KupImageListEventPayload>` |
+
 
 ## Methods
 
@@ -31,8 +34,8 @@ Used to retrieve component's props values.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name           | Type      | Description                                                                            |
+| -------------- | --------- | -------------------------------------------------------------------------------------- |
 | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. |
 
 #### Returns
@@ -49,61 +52,66 @@ This method is used to trigger a new render of the component.
 
 Type: `Promise<void>`
 
+
+
 ### `setProps(props: GenericObject) => Promise<void>`
 
 Sets the props to the component.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name    | Type            | Description                                                  |
+| ------- | --------------- | ------------------------------------------------------------ |
 | `props` | `GenericObject` | - Object containing props that will be set to the component. |
 
 #### Returns
 
 Type: `Promise<void>`
 
+
+
+
 ## CSS Custom Properties
 
-| Name | Description |
-| --- | --- |
-| `--kup-imagelist-background-color` | Sets the background color of the component. |
-| `--kup-imagelist-columns` | Sets the number of columns of the grid. |
-| `--kup-imagelist-grid-gap` | Sets the gap of the grid. |
-| `--kup-imagelist-image-margin` | Sets the margin of the images. |
-| `--kup-imagelist-image-min-height` | Sets the minimun height of the images (useful for icons). |
-| `--kup-imagelist-item-border-radius` | Sets the border radius of items. |
-| `--kup-imagelist-item-height` | Sets the height of an item. |
-| `--kup-imagelist-item-padding` | Sets the padding of an item. |
-| `--kup-imagelist-item-width` | Sets the width of an item. |
-| `--kup-imagelist-label-margin` | Sets the margin of the labels. |
-| `--kup-imagelist-primary-color` | Sets the primary color of the component (ripple effect). |
-| `--kup-imagelist-primary-color-rgb` | Sets the RGB values of the primary color. |
-| `--kup-imagelist-text-color` | Sets the text color of the labels. |
+| Name                                 | Description                                               |
+| ------------------------------------ | --------------------------------------------------------- |
+| `--kup-imagelist-background-color`   | Sets the background color of the component.               |
+| `--kup-imagelist-columns`            | Sets the number of columns of the grid.                   |
+| `--kup-imagelist-grid-gap`           | Sets the gap of the grid.                                 |
+| `--kup-imagelist-image-margin`       | Sets the margin of the images.                            |
+| `--kup-imagelist-image-min-height`   | Sets the minimun height of the images (useful for icons). |
+| `--kup-imagelist-item-border-radius` | Sets the border radius of items.                          |
+| `--kup-imagelist-item-height`        | Sets the height of an item.                               |
+| `--kup-imagelist-item-padding`       | Sets the padding of an item.                              |
+| `--kup-imagelist-item-width`         | Sets the width of an item.                                |
+| `--kup-imagelist-label-margin`       | Sets the margin of the labels.                            |
+| `--kup-imagelist-primary-color`      | Sets the primary color of the component (ripple effect).  |
+| `--kup-imagelist-primary-color-rgb`  | Sets the RGB values of the primary color.                 |
+| `--kup-imagelist-text-color`         | Sets the text color of the labels.                        |
+
 
 ## Dependencies
 
 ### Depends on
 
--   [kup-card](../kup-card)
--   [kup-dialog](../kup-dialog)
--   [kup-badge](../kup-badge)
--   [kup-autocomplete](../kup-autocomplete)
--   [kup-chip](../kup-chip)
--   [kup-text-field](../kup-text-field)
--   [kup-color-picker](../kup-color-picker)
--   [kup-combobox](../kup-combobox)
--   [kup-date-picker](../kup-date-picker)
--   [kup-rating](../kup-rating)
--   [kup-time-picker](../kup-time-picker)
--   [kup-image](../kup-image)
--   [kup-button-list](../kup-button-list)
--   [kup-chart](../kup-chart)
--   [kup-gauge](../kup-gauge)
--   [kup-progress-bar](../kup-progress-bar)
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+- [kup-badge](../kup-badge)
+- [kup-autocomplete](../kup-autocomplete)
+- [kup-chip](../kup-chip)
+- [kup-text-field](../kup-text-field)
+- [kup-color-picker](../kup-color-picker)
+- [kup-combobox](../kup-combobox)
+- [kup-date-picker](../kup-date-picker)
+- [kup-rating](../kup-rating)
+- [kup-time-picker](../kup-time-picker)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-chart](../kup-chart)
+- [kup-gauge](../kup-gauge)
+- [kup-progress-bar](../kup-progress-bar)
 
 ### Graph
-
 ```mermaid
 graph TD;
   kup-image-list --> kup-card
@@ -275,6 +283,6 @@ graph TD;
   style kup-image-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
----
+----------------------------------------------
 
-_Built with [StencilJS](https://stenciljs.com/)_
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -27,7 +27,7 @@
   );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    var(--kup-radius-01)
+    var(--kup-radius-00)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);

diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -136,6 +136,7 @@ graph TD;
   kup-autocomplete --> kup-list
   kup-autocomplete --> kup-card
   kup-autocomplete --> kup-dialog
+  kup-autocomplete --> kup-badge
   kup-list --> kup-list
   kup-list --> kup-radio
   kup-list --> kup-card
@@ -154,18 +155,23 @@ graph TD;
   kup-chip --> kup-badge
   kup-text-field --> kup-card
   kup-text-field --> kup-dialog
+  kup-text-field --> kup-badge
   kup-color-picker --> kup-card
   kup-color-picker --> kup-dialog
+  kup-color-picker --> kup-badge
   kup-combobox --> kup-list
   kup-combobox --> kup-card
   kup-combobox --> kup-dialog
+  kup-combobox --> kup-badge
   kup-date-picker --> kup-card
   kup-date-picker --> kup-dialog
+  kup-date-picker --> kup-badge
   kup-rating --> kup-card
   kup-rating --> kup-dialog
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
+  kup-time-picker --> kup-badge
   kup-image --> kup-spinner
   kup-image --> kup-card
   kup-image --> kup-dialog
@@ -191,6 +197,7 @@ graph TD;
   kup-button --> kup-badge
   kup-checkbox --> kup-card
   kup-checkbox --> kup-dialog
+  kup-checkbox --> kup-badge
   kup-data-table --> kup-card
   kup-data-table --> kup-list
   kup-data-table --> kup-switch