Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kup theme v2 #1928

Merged
merged 14 commits into from
Jun 11, 2024
Merged

Kup theme v2 #1928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
122f88d
fix textfield placeholder
Leonardo-Signorelli Jun 10, 2024
8db7bd1
Update f-text-field.scss
Leonardo-Signorelli Jun 10, 2024
230904b
variables
Leonardo-Signorelli Jun 10, 2024
f168b60
Update f-text-field.scss
Leonardo-Signorelli Jun 10, 2024
584976b
update kup-accordion
Leonardo-Signorelli Jun 10, 2024
91e1195
Update kup-box-main.scss
Leonardo-Signorelli Jun 10, 2024
2211c91
update kup-calendar
Leonardo-Signorelli Jun 10, 2024
823d52d
kup token review
Leonardo-Signorelli Jun 10, 2024
e88ee2a
update kup-data-table
Leonardo-Signorelli Jun 10, 2024
ce432a8
update components
Leonardo-Signorelli Jun 10, 2024
f53174d
update f-components
Leonardo-Signorelli Jun 10, 2024
92f93eb
minor fixes
Leonardo-Signorelli Jun 10, 2024
5452fb2
general fixes
Leonardo-Signorelli Jun 11, 2024
38c1a4d
f-checkbox fix
Leonardo-Signorelli Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/ketchup-showcase/public/showcase.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@
}

code.flat {
background: var(--kup-gray-color-10);
background: var(--kup-layer-1);
border-radius: var(--kup-radius-00);
border: 1px solid var(--kup-gray-color-30);
color: var(--kup-gray-color-90);
border: 1px solid var(--kup-border-subtle);
color: var(--kup-text-primary);
display: flex;
font-family: var(--kup-font-family-monospace);
font-size: 14px;
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup-showcase/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1115,7 +1115,7 @@ label {
}

.version {
border-top: 1px solid var(--kup-border-color);
border-top: 1px solid var(--kup-border-subtle);
box-sizing: border-box;
font-weight: 600;
margin-top: auto;
Expand Down Expand Up @@ -1215,7 +1215,7 @@ a.footer__icon--trailing {
#rasterize-viewer {
background: var(--kup-background-color);
bottom: 0;
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
height: 30vh;
overflow: auto;
position: fixed;
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default {
],
},
],
color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
image: [
{
data: [
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export default {
],
},
],
color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
combobox: [
{
data: {
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1164,7 +1164,7 @@ export default {
],
},
],
color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
combobox: [
{
data: {
Expand Down
2 changes: 1 addition & 1 deletion ...ages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ export default {
}

.login-box {
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
box-shadow: var(--kup-box-shadow);
margin: 4px;
padding: 8px;
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div
class="kup-container"
style="
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
height: 128px;
padding: 0;
width: 100%;
Expand All @@ -58,7 +58,7 @@
<div
class="kup-container"
style="
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
height: 100px;
margin: auto;
padding: 0;
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup-showcase/src/views/framework/kup-debug/examples/KupDebugTester.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@
}

#debug-section {
border-bottom: 2px solid var(--kup-border-color);
border-bottom: 2px solid var(--kup-border-subtle);
padding-bottom: 1em;
}

#debug-wrapper {
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
padding: 0.5em;
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion ...showcase/src/views/framework/kup-dynamic-position/examples/KupDynamicPositionFeatures.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export default {
<style lang="scss" scoped>
.anchor-point {
align-items: center;
border: 2px var(--kup-border-color);
border: 2px var(--kup-border-subtle);
border-style: inset;
box-sizing: border-box;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/framework/kup-interact/examples/KupInteractFeatures.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export default {
.interact-example {
align-items: center;
background: var(--kup-background-color);
border: 2px var(--kup-border-color);
border: 2px var(--kup-border-subtle);
box-sizing: border-box;
display: flex;
height: 6em;
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/framework/kup-language/examples/KupLanguageFeatures.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default {
const row: KupDataRow = {
cells: {
KEYS: {
style: { borderRight: '1px solid var(--kup-border-color)' },
style: { borderRight: '1px solid var(--kup-border-subtle)' },
value: key,
},
},
Expand Down
6 changes: 3 additions & 3 deletions packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeFeatures.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export default {
themeWrapper.classList.add('theme-wrapper');
themeWrapper.style.backgroundColor =
variables['--kup-background-color'];
themeWrapper.style.borderColor = variables['--kup-border-color'];
themeWrapper.style.borderColor = variables['--kup-border-subtle'];
themeWrapper.id = theme;
themeWrapper.title = 'Toggle ' + theme + ' theme';
themeWrapper.onclick = () => setTheme(theme);
Expand Down Expand Up @@ -296,7 +296,7 @@ export default {
label: 'Color',
},
isEditable: true,
style: { borderRight: '1px solid var(--kup-border-color)' },
style: { borderRight: '1px solid var(--kup-border-subtle)' },
value: colorCheck.hexColor,
},
},
Expand Down Expand Up @@ -357,7 +357,7 @@ export default {

<style scoped lang="scss">
#random-area {
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
margin: 0.25em auto 5em auto;
padding: 1em;
width: 18em;
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup-showcase/src/views/framework/kup-theme/examples/KupThemeMaker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,7 +457,7 @@
</tr>
<tr>
<td class="prevent-cr">
<span class="code-word">--kup-border-color</span>
<span class="code-word">--kup-border-subtle</span>
</td>
<td>Sets the color of borders, such as checkboxes borders.</td>
<td class="prevent-cr">
Expand Down Expand Up @@ -1842,7 +1842,7 @@ export default {
if (variables) {
themeWrapper.style.backgroundColor =
variables['--kup-background-color'];
themeWrapper.style.borderColor = variables['--kup-border-color'];
themeWrapper.style.borderColor = variables['--kup-border-subtle'];
themeImage.color = variables['--kup-primary-color'];
themeText.style.color = variables['--kup-text-color'];
themeText.style.fontFamily = variables['--kup-font-family'];
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup-showcase/src/views/framework/kup-tooltip/examples/KupTooltipFeatures.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ export default {

<style lang="scss" scoped>
.anchor-point {
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
border-radius: 4px;
margin: 1em auto;
max-width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup/src/calendar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@
}

h1 {
background-color: var(--kup-gray-color-90);
background-color: var(--kup-text-primary);
border-radius: 4px;
color: var(--kup-gray-color-10);
color: var(--kup-layer-1);
line-height: 2em;
margin-top: 0;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/card-performance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
}

#card-wrapper {
border: 1px solid var(--kup-border-color, black);
border: 1px solid var(--kup-border-subtle, black);
}
</style>
<!-- Versione jQuery 2.2.4, usata dalle JSF in WebUP -->
Expand Down
10 changes: 10 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3911,6 +3911,11 @@ export namespace Components {
* @default false
*/
"outlined": boolean;
/**
* Set the placeholder value. It's an example, not a label.
* @default false
*/
"placeholder": string;
/**
* When set, appear 2 buttons to increment and decrement the value.
* @default false
Expand Down Expand Up @@ -8687,6 +8692,11 @@ declare namespace LocalJSX {
* @default false
*/
"outlined"?: boolean;
/**
* Set the placeholder value. It's an example, not a label.
* @default false
*/
"placeholder"?: string;
/**
* When set, appear 2 buttons to increment and decrement the value.
* @default false
Expand Down
14 changes: 7 additions & 7 deletions packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
}

:host(.#{$kup-class-danger}) {
--kup-accordion-primary-color: var(--kup-danger-color);
--kup-accordion-primary-color-rgb: var(--kup-danger-color-rgb);
--kup-accordion-primary-color: var(--kup-danger-color-60);
--kup-accordion-primary-color-rgb: var(--kup-danger-color-60-rgb);
--kup-accordion-text-on-primary-color: white;
}

:host(.#{$kup-class-info}) {
--kup-accordion-primary-color: var(--kup-info-color);
--kup-accordion-primary-color-rgb: var(--kup-info-color-rgb);
--kup-accordion-primary-color: var(--kup-info-50-color);
--kup-accordion-primary-color-rgb: var(--kup-info-color-50-rgb);
--kup-accordion-text-on-primary-color: white;
}

Expand All @@ -34,12 +34,12 @@

:host(.#{$kup-class-success}) {
--kup-accordion-primary-color: var(--kup-success-color-40);
--kup-accordion-primary-color-rgb: var(--kup-success-color-rgb);
--kup-accordion-primary-color-rgb: var(--kup-success-color-40-rgb);
--kup-accordion-text-on-primary-color: white;
}

:host(.#{$kup-class-warning}) {
--kup-accordion-primary-color: var(--kup-warning-color);
--kup-accordion-primary-color-rgb: var(--kup-warning-color-rgb);
--kup-accordion-primary-color: var(--kup-warning-40-color);
--kup-accordion-primary-color-rgb: var(--kup-warning-color-40-rgb);
--kup-accordion-text-on-primary-color: white;
}
10 changes: 5 additions & 5 deletions packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
:host {
--kup_accordion_border_top_color: var(
--kup-accordion-border-top-color,
var(--kup-gray-color-20)
var(--kup-border-subtle)
);
--kup_accordion_item_small_height: var(
--kup-accordion-item-small-height,
Expand All @@ -30,27 +30,27 @@
);
--kup_accordion_item_outline_color_active: var(
--kup-accordion-item-outline-color-focus,
var(--kup-primary-color-60)
var(--kup-border-interactive)
);
--kup_accordion_item_large_height: var(
--kup-accordion-item-medium-height,
48px
);
--kup_accordion_header_background_color: var(
--kup-accordion-header-background-color,
var(--kup-gray-color-0)
var(--kup-layer-0)
);
--kup_accordion_header_background_color_hover: var(
--kup-accordion-header-background-color-hover,
var(--kup-gray-color-20)
var(--kup-layer-0-hover)
);
--kup_accordion_header_padding: var(
--kup-accordion-header-padding,
var(--kup-space-05)
);
--kup_accordion_dropdown_icon_color: var(
--kup-accordio-dropdown-icon-color,
var(--kup-gray-color-90)
var(--kup-text-primary)
);
--kup_accordion_transition: var(--kup-accordion-transition, 80ms);

Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@

// :host(:not(.#{$kup-class-borderless})) {
// .box {
// border: 1px solid var(--kup-border-color);
// border: 1px solid var(--kup-border-subtle);
// }
// }

Expand Down
27 changes: 16 additions & 11 deletions packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,19 @@
*/

:host {
--kup_box_background_color: var(--kup-layer-1, var(--kup-gray-color-10));
--kup_box_background_color: var(--kup-box-background-color, var(--kup-layer-1));
--kup_box_background_color_hover: var(
--kup-box-background-color-hover,
var(--kup-gray-color-20)
var(--kup-layer-1-hover)
);
--kup_box_text_color: var(--kup-text-secondary, var(--kup-gray-color-70));
--kup_box_background_color_selected: var(
--kup-box-background-color-selected,
var(--kup-layer-1-selected)
);
--kup_box_text_color: var(--kup-box-text-color, var(--kup-text-secondary));
--kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-03));
--kup_box_transition: var(--kup-box-transition, 0.25s);
--kup_box_border_color_drag:var(--kup-box-border-color-drag, var(--kup-border-interactive))
display: block;

--kup_box_padding: var(--kup-box-padding, var(--kup-space-05));
Expand All @@ -28,7 +33,7 @@

&[#{$kup-dd-drag-over}] {
position: relative;
border: 3px dashed var(--kup-border-color);
border: 3px dashed var(--kup_box_border_color_drag);
}
}

Expand Down Expand Up @@ -84,7 +89,7 @@
}

&.selected {
background-color: var(--kup_box_background_color_hover);
background-color: var(--kup_box_background_color_selected);

& .box-section.titled > h3 {
background-color: transparent;
Expand All @@ -96,7 +101,7 @@
}

&[#{$kup-dd-drag-over}] {
border: 3px dashed var(--kup-border-color);
border: 3px dashed var(--kup_box_border_color_drag);
position: relative;
z-index: 2;
}
Expand Down Expand Up @@ -132,8 +137,8 @@
// collapsible sections
&.collapse-section {
.header {
border-top: 1px solid var(--kup-border-color);
color: rgba(var(--kup-text-color-rgb), 0.75);
border-top: 1px solid var(--kup-border-subtle);
color: rgba(var(--kup-text-secondary-rgb), 0.75);
display: flex;
justify-content: space-around;
width: 100%;
Expand Down Expand Up @@ -172,7 +177,7 @@
}

&.titled {
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
padding-top: 5px;
position: relative;
margin: 10px;
Expand Down Expand Up @@ -214,7 +219,7 @@

.row-action-menu {
background: var(--kup-background-color);
border: 1px solid var(--kup-border-color);
border: 1px solid var(--kup-border-subtle);
box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
position: absolute;
top: 0;
Expand All @@ -236,7 +241,7 @@
line-height: 30px;

&:not(:last-child) {
border-bottom: 1px solid var(--kup-border-color);
border-bottom: 1px solid var(--kup-border-subtle);
}
}
}
Expand Down
Loading