Merge branch 'master' of https://github.com/primefaces/primevue
Mert Sincan
commit
5fa6e72459
|
|
@ -13463,7 +13463,7 @@
|
|||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"default": "false",
|
||||
"description": "Displays a button to clear the column filtering."
|
||||
},
|
||||
{
|
||||
|
|
@ -80226,6 +80226,24 @@
|
|||
"default": "",
|
||||
"description": "Padding of header"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "datatable.header.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of header"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "datatable.header.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of header"
|
||||
},
|
||||
{
|
||||
"name": "headerCell.background",
|
||||
"token": "datatable.header.cell.background",
|
||||
|
|
@ -80352,6 +80370,24 @@
|
|||
"default": "",
|
||||
"description": "Focus ring shadow of header cell"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "datatable.header.cell.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of header cell"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "datatable.header.cell.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of header cell"
|
||||
},
|
||||
{
|
||||
"name": "columnTitle.fontWeight",
|
||||
"token": "datatable.column.title.font.weight",
|
||||
|
|
@ -80487,6 +80523,24 @@
|
|||
"default": "",
|
||||
"description": "Padding of body cell"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "datatable.body.cell.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of body cell"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "datatable.body.cell.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of body cell"
|
||||
},
|
||||
{
|
||||
"name": "bodyCell.selectedBorderColor",
|
||||
"token": "datatable.body.cell.selected.border.color",
|
||||
|
|
@ -80532,6 +80586,24 @@
|
|||
"default": "",
|
||||
"description": "Padding of footer cell"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "datatable.footer.cell.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of footer cell"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "datatable.footer.cell.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of footer cell"
|
||||
},
|
||||
{
|
||||
"name": "columnFooter.fontWeight",
|
||||
"token": "datatable.column.footer.font.weight",
|
||||
|
|
@ -80586,6 +80658,24 @@
|
|||
"default": "",
|
||||
"description": "Padding of footer"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "datatable.footer.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of footer"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "datatable.footer.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of footer"
|
||||
},
|
||||
{
|
||||
"name": "dropPoint.color",
|
||||
"token": "datatable.drop.point.color",
|
||||
|
|
@ -92222,40 +92312,40 @@
|
|||
"ProgressSpinnerDesignTokens": {
|
||||
"props": [
|
||||
{
|
||||
"name": "root.color.1",
|
||||
"token": "progressspinner.color.1",
|
||||
"name": "root.colorOne",
|
||||
"token": "progressspinner.color.one",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Color.1 of root"
|
||||
"description": "Color one of root"
|
||||
},
|
||||
{
|
||||
"name": "root.color.2",
|
||||
"token": "progressspinner.color.2",
|
||||
"name": "root.colorTwo",
|
||||
"token": "progressspinner.color.two",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Color.2 of root"
|
||||
"description": "Color two of root"
|
||||
},
|
||||
{
|
||||
"name": "root.color.3",
|
||||
"token": "progressspinner.color.3",
|
||||
"name": "root.colorThree",
|
||||
"token": "progressspinner.color.three",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Color.3 of root"
|
||||
"description": "Color three of root"
|
||||
},
|
||||
{
|
||||
"name": "root.color.4",
|
||||
"token": "progressspinner.color.4",
|
||||
"name": "root.colorFour",
|
||||
"token": "progressspinner.color.four",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Color.4 of root"
|
||||
"description": "Color four of root"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -98288,22 +98378,22 @@
|
|||
"description": "Checked color of icon"
|
||||
},
|
||||
{
|
||||
"name": "content.left",
|
||||
"token": "togglebutton.content.left",
|
||||
"name": "content.padding",
|
||||
"token": "togglebutton.content.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Left of content"
|
||||
"description": "Padding of content"
|
||||
},
|
||||
{
|
||||
"name": "content.top",
|
||||
"token": "togglebutton.content.top",
|
||||
"name": "content.borderRadius",
|
||||
"token": "togglebutton.content.border.radius",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Top of content"
|
||||
"description": "Border radius of content"
|
||||
},
|
||||
{
|
||||
"name": "content.checkedShadow",
|
||||
|
|
@ -98314,6 +98404,24 @@
|
|||
"default": "",
|
||||
"description": "Checked shadow of content"
|
||||
},
|
||||
{
|
||||
"name": "sm.padding",
|
||||
"token": "togglebutton.content.sm.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Sm padding of content"
|
||||
},
|
||||
{
|
||||
"name": "lg.padding",
|
||||
"token": "togglebutton.content.lg.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Lg padding of content"
|
||||
},
|
||||
{
|
||||
"name": "content.checkedBackground",
|
||||
"token": "togglebutton.content.checked.background",
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
},
|
||||
showClearButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
showApplyButton: {
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -431,7 +431,7 @@ export interface ColumnProps {
|
|||
showFilterOperator?: boolean | undefined;
|
||||
/**
|
||||
* Displays a button to clear the column filtering.
|
||||
* @defaultValue true
|
||||
* @defaultValue false
|
||||
*/
|
||||
showClearButton?: boolean | undefined;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
|
||||
<component :is="filterIconTemplate || hasRowFilter() ? 'FilterFillIcon' : 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -170,6 +170,7 @@ import { FilterOperator } from '@primevue/core/api';
|
|||
import BaseComponent from '@primevue/core/basecomponent';
|
||||
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
|
||||
import FilterIcon from '@primevue/icons/filter';
|
||||
import FilterFillIcon from '@primevue/icons/filterfill';
|
||||
import FilterSlashIcon from '@primevue/icons/filterslash';
|
||||
import PlusIcon from '@primevue/icons/plus';
|
||||
import TrashIcon from '@primevue/icons/trash';
|
||||
|
|
@ -212,7 +213,7 @@ export default {
|
|||
},
|
||||
showClearButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
showApplyButton: {
|
||||
type: Boolean,
|
||||
|
|
@ -718,6 +719,7 @@ export default {
|
|||
Button,
|
||||
Portal,
|
||||
FilterSlashIcon,
|
||||
FilterFillIcon,
|
||||
FilterIcon,
|
||||
TrashIcon,
|
||||
PlusIcon
|
||||
|
|
|
|||
|
|
@ -511,43 +511,43 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-header {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: ${dt('datatable.header.sm.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: ${dt('datatable.header.cell.sm.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: ${dt('datatable.body.cell.sm.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: ${dt('datatable.footer.cell.sm.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-sm .p-datatable-footer {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: ${dt('datatable.footer.sm.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-header {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: ${dt('datatable.header.lg.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: ${dt('datatable.header.cell.lg.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: ${dt('datatable.body.lg.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: ${dt('datatable.footer.cell.lg.padding')};
|
||||
}
|
||||
|
||||
.p-datatable.p-datatable-lg .p-datatable-footer {
|
||||
padding: 1rem 1.25rem;
|
||||
padding: ${dt('datatable.footer.lg.padding')};
|
||||
}
|
||||
|
||||
.p-datatable-row-toggle-button {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const theme = ({ dt }) => `
|
|||
.p-progressspinner-circle {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: ${dt('progressspinner.color.1')};
|
||||
stroke: ${dt('progressspinner.colorOne')};
|
||||
animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
|
@ -58,17 +58,17 @@ const theme = ({ dt }) => `
|
|||
@keyframes p-progressspinner-color {
|
||||
100%,
|
||||
0% {
|
||||
stroke: ${dt('progressspinner.color.1')};
|
||||
stroke: ${dt('progressspinner.colorOne')};
|
||||
}
|
||||
40% {
|
||||
stroke: ${dt('progressspinner.color.2')};
|
||||
stroke: ${dt('progressspinner.colorTwo')};
|
||||
}
|
||||
66% {
|
||||
stroke: ${dt('progressspinner.color.3')};
|
||||
stroke: ${dt('progressspinner.colorThree')};
|
||||
}
|
||||
80%,
|
||||
90% {
|
||||
stroke: ${dt('progressspinner.color.4')};
|
||||
stroke: ${dt('progressspinner.colorFour')};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ const theme = ({ dt }) => `
|
|||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: ${dt('togglebutton.color')};
|
||||
|
|
@ -24,35 +22,16 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-togglebutton-content {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: ${dt('togglebutton.gap')};
|
||||
}
|
||||
|
||||
.p-togglebutton-label,
|
||||
.p-togglebutton-icon {
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-togglebutton::before {
|
||||
content: "";
|
||||
padding: ${dt('togglebutton.content.padding')};
|
||||
background: transparent;
|
||||
border-radius: ${dt('togglebutton.content.border.radius')};
|
||||
transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
|
||||
outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
|
||||
position: absolute;
|
||||
inset-inline-start: ${dt('togglebutton.content.left')};
|
||||
inset-block-start: ${dt('togglebutton.content.top')};
|
||||
width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
|
||||
height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
|
||||
border-radius: ${dt('togglebutton.border.radius')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked::before {
|
||||
background: ${dt('togglebutton.content.checked.background')};
|
||||
box-shadow: ${dt('togglebutton.content.checked.shadow')};
|
||||
}
|
||||
|
||||
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
|
||||
|
|
@ -66,6 +45,11 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('togglebutton.checked.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton-checked .p-togglebutton-content {
|
||||
background: ${dt('togglebutton.content.checked.background')};
|
||||
box-shadow: ${dt('togglebutton.content.checked.shadow')};
|
||||
}
|
||||
|
||||
.p-togglebutton:focus-visible {
|
||||
box-shadow: ${dt('togglebutton.focus.ring.shadow')};
|
||||
outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
|
||||
|
|
@ -84,6 +68,12 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('togglebutton.disabled.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton-label,
|
||||
.p-togglebutton-icon {
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-togglebutton-icon {
|
||||
color: ${dt('togglebutton.icon.color')};
|
||||
}
|
||||
|
|
@ -105,10 +95,18 @@ const theme = ({ dt }) => `
|
|||
font-size: ${dt('togglebutton.sm.font.size')};
|
||||
}
|
||||
|
||||
.p-togglebutton-sm .p-togglebutton-content {
|
||||
padding: ${dt('togglebutton.content.sm.padding')};
|
||||
}
|
||||
|
||||
.p-togglebutton-lg {
|
||||
padding: ${dt('togglebutton.lg.padding')};
|
||||
font-size: ${dt('togglebutton.lg.font.size')};
|
||||
}
|
||||
|
||||
.p-togglebutton-lg .p-togglebutton-content {
|
||||
padding: ${dt('togglebutton.content.lg.padding')};
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
|
|
@ -25,6 +31,12 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
},
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnTitle: {
|
||||
|
|
@ -47,13 +59,25 @@ export default {
|
|||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnFooter: {
|
||||
fontWeight: '600'
|
||||
|
|
@ -63,7 +87,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
dropPoint: {
|
||||
color: '{primary.color}'
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
'color.1': '{red.500}',
|
||||
'color.2': '{blue.500}',
|
||||
'color.3': '{green.500}',
|
||||
'color.4': '{yellow.500}'
|
||||
colorOne: '{red.500}',
|
||||
colorTwo: '{blue.500}',
|
||||
colorThree: '{green.500}',
|
||||
colorFour: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
'color.1': '{red.400}',
|
||||
'color.2': '{blue.400}',
|
||||
'color.3': '{green.400}',
|
||||
'color.4': '{yellow.400}'
|
||||
colorOne: '{red.400}',
|
||||
colorTwo: '{blue.400}',
|
||||
colorThree: '{green.400}',
|
||||
colorFour: '{yellow.400}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
root: {
|
||||
padding: '0.5rem 1rem',
|
||||
padding: '0.25rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
gap: '0.5rem',
|
||||
fontWeight: '500',
|
||||
|
|
@ -18,20 +18,26 @@ export default {
|
|||
transitionDuration: '{form.field.transition.duration}',
|
||||
sm: {
|
||||
fontSize: '{form.field.sm.font.size}',
|
||||
padding: '0.375rem 0.75rem'
|
||||
padding: '0.25rem'
|
||||
},
|
||||
lg: {
|
||||
fontSize: '{form.field.lg.font.size}',
|
||||
padding: '0.625rem 1.25rem'
|
||||
padding: '0.25rem'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
content: {
|
||||
left: '0.25rem',
|
||||
top: '0.25rem',
|
||||
checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
|
||||
padding: '0.25rem 0.75rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
|
||||
sm: {
|
||||
padding: '0.25rem 0.75rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '0.25rem 0.75rem'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,13 @@ export default {
|
|||
header: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
borderWidth: '1px 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
headerCell: {
|
||||
selectedBackground: '{highlight.background}',
|
||||
|
|
@ -20,6 +26,12 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
},
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnTitle: {
|
||||
|
|
@ -42,11 +54,23 @@ export default {
|
|||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
footerCell: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnFooter: {
|
||||
fontWeight: '700'
|
||||
|
|
@ -54,7 +78,13 @@ export default {
|
|||
footer: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
dropPoint: {
|
||||
color: '{primary.color}'
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
'color.1': '{pink.500}',
|
||||
'color.2': '{sky.500}',
|
||||
'color.3': '{emerald.500}',
|
||||
'color.4': '{amber.500}'
|
||||
colorOne: '{pink.500}',
|
||||
colorTwo: '{sky.500}',
|
||||
colorThree: '{emerald.500}',
|
||||
colorFour: '{amber.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
'color.1': '{pink.400}',
|
||||
'color.2': '{sky.400}',
|
||||
'color.3': '{emerald.400}',
|
||||
'color.4': '{amber.400}'
|
||||
colorOne: '{pink.400}',
|
||||
colorTwo: '{sky.400}',
|
||||
colorThree: '{emerald.400}',
|
||||
colorFour: '{amber.400}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,10 +39,16 @@ export default {
|
|||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
content: {
|
||||
left: '0.25rem',
|
||||
top: '0.25rem',
|
||||
checkedBackground: 'transparent',
|
||||
checkedShadow: 'none'
|
||||
checkedShadow: 'none',
|
||||
padding: '0',
|
||||
borderRadius: '0',
|
||||
sm: {
|
||||
padding: '0'
|
||||
},
|
||||
lg: {
|
||||
padding: '0'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
|
|
@ -25,6 +31,12 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
},
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnTitle: {
|
||||
|
|
@ -47,13 +59,25 @@ export default {
|
|||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnFooter: {
|
||||
fontWeight: '600'
|
||||
|
|
@ -63,7 +87,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
dropPoint: {
|
||||
color: '{primary.color}'
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
'color.1': '{red.500}',
|
||||
'color.2': '{blue.500}',
|
||||
'color.3': '{green.500}',
|
||||
'color.4': '{yellow.500}'
|
||||
colorOne: '{red.500}',
|
||||
colorTwo: '{blue.500}',
|
||||
colorThree: '{green.500}',
|
||||
colorFour: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
'color.1': '{red.400}',
|
||||
'color.2': '{blue.400}',
|
||||
'color.3': '{green.400}',
|
||||
'color.4': '{yellow.400}'
|
||||
colorOne: '{red.400}',
|
||||
colorTwo: '{blue.400}',
|
||||
colorThree: '{green.400}',
|
||||
colorFour: '{yellow.400}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,10 +38,16 @@ export default {
|
|||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
content: {
|
||||
left: '0.25rem',
|
||||
top: '0.25rem',
|
||||
checkedBackground: 'transparent',
|
||||
checkedShadow: 'none'
|
||||
checkedShadow: 'none',
|
||||
padding: '0',
|
||||
borderRadius: '0',
|
||||
sm: {
|
||||
padding: '0'
|
||||
},
|
||||
lg: {
|
||||
padding: '0'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '1px 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
|
|
@ -25,6 +31,12 @@ export default {
|
|||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
},
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnTitle: {
|
||||
|
|
@ -47,13 +59,25 @@ export default {
|
|||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
columnFooter: {
|
||||
fontWeight: '700'
|
||||
|
|
@ -63,7 +87,13 @@ export default {
|
|||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem'
|
||||
padding: '0.75rem 1rem',
|
||||
sm: {
|
||||
padding: '0.375rem 0.5rem'
|
||||
},
|
||||
lg: {
|
||||
padding: '1rem 1.25rem'
|
||||
}
|
||||
},
|
||||
dropPoint: {
|
||||
color: '{primary.color}'
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
'color.1': '{red.500}',
|
||||
'color.2': '{blue.500}',
|
||||
'color.3': '{green.500}',
|
||||
'color.4': '{yellow.500}'
|
||||
colorOne: '{red.500}',
|
||||
colorTwo: '{blue.500}',
|
||||
colorThree: '{green.500}',
|
||||
colorFour: '{yellow.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
'color.1': '{red.400}',
|
||||
'color.2': '{blue.400}',
|
||||
'color.3': '{green.400}',
|
||||
'color.4': '{yellow.400}'
|
||||
colorOne: '{red.400}',
|
||||
colorTwo: '{blue.400}',
|
||||
colorThree: '{green.400}',
|
||||
colorFour: '{yellow.400}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,10 +39,16 @@ export default {
|
|||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
content: {
|
||||
left: '0.25rem',
|
||||
top: '0.25rem',
|
||||
checkedBackground: 'transparent',
|
||||
checkedShadow: 'none'
|
||||
checkedShadow: 'none',
|
||||
padding: '0',
|
||||
borderRadius: '0',
|
||||
sm: {
|
||||
padding: '0'
|
||||
},
|
||||
lg: {
|
||||
padding: '0'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
|
|||
* @designToken datatable.header.padding
|
||||
*/
|
||||
padding?: string;
|
||||
/**
|
||||
* Sm of header
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of header
|
||||
*
|
||||
* @designToken datatable.header.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of header
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of header
|
||||
*
|
||||
* @designToken datatable.header.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the header cell section
|
||||
|
|
@ -156,6 +178,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
|
|||
*/
|
||||
shadow?: string;
|
||||
};
|
||||
/**
|
||||
* Sm of header cell
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of header cell
|
||||
*
|
||||
* @designToken datatable.header.cell.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of header cell
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of header cell
|
||||
*
|
||||
* @designToken datatable.header.cell.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the column title section
|
||||
|
|
@ -266,6 +310,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
|
|||
* @designToken datatable.body.cell.padding
|
||||
*/
|
||||
padding?: string;
|
||||
/**
|
||||
* Sm of body cell
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of body cell
|
||||
*
|
||||
* @designToken datatable.body.cell.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of body cell
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of body cell
|
||||
*
|
||||
* @designToken datatable.body.cell.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Selected border color of body cell
|
||||
*
|
||||
|
|
@ -301,6 +367,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
|
|||
* @designToken datatable.footer.cell.padding
|
||||
*/
|
||||
padding?: string;
|
||||
/**
|
||||
* Sm of footer cell
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of footer cell
|
||||
*
|
||||
* @designToken datatable.footer.cell.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of footer cell
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of footer cell
|
||||
*
|
||||
* @designToken datatable.footer.cell.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the column footer section
|
||||
|
|
@ -347,6 +435,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
|
|||
* @designToken datatable.footer.padding
|
||||
*/
|
||||
padding?: string;
|
||||
/**
|
||||
* Sm of footer
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of footer
|
||||
*
|
||||
* @designToken datatable.footer.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of footer
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of footer
|
||||
*
|
||||
* @designToken datatable.footer.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the drop point section
|
||||
|
|
|
|||
|
|
@ -16,28 +16,28 @@ export interface ProgressSpinnerDesignTokens extends ColorSchemeDesignToken<Prog
|
|||
*/
|
||||
root?: {
|
||||
/**
|
||||
* Color.1 of root
|
||||
* Color one of root
|
||||
*
|
||||
* @designToken progressspinner.color.1
|
||||
* @designToken progressspinner.color.one
|
||||
*/
|
||||
'color.1'?: string;
|
||||
colorOne?: string;
|
||||
/**
|
||||
* Color.2 of root
|
||||
* Color two of root
|
||||
*
|
||||
* @designToken progressspinner.color.2
|
||||
* @designToken progressspinner.color.two
|
||||
*/
|
||||
'color.2'?: string;
|
||||
colorTwo?: string;
|
||||
/**
|
||||
* Color.3 of root
|
||||
* Color three of root
|
||||
*
|
||||
* @designToken progressspinner.color.3
|
||||
* @designToken progressspinner.color.three
|
||||
*/
|
||||
'color.3'?: string;
|
||||
colorThree?: string;
|
||||
/**
|
||||
* Color.4 of root
|
||||
* Color four of root
|
||||
*
|
||||
* @designToken progressspinner.color.4
|
||||
* @designToken progressspinner.color.four
|
||||
*/
|
||||
'color.4'?: string;
|
||||
colorFour?: string;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -221,23 +221,45 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
|
|||
*/
|
||||
content?: {
|
||||
/**
|
||||
* Left of content
|
||||
* Padding of content
|
||||
*
|
||||
* @designToken togglebutton.content.left
|
||||
* @designToken togglebutton.content.padding
|
||||
*/
|
||||
left?: string;
|
||||
padding?: string;
|
||||
/**
|
||||
* Top of content
|
||||
* Border radius of content
|
||||
*
|
||||
* @designToken togglebutton.content.top
|
||||
* @designToken togglebutton.content.border.radius
|
||||
*/
|
||||
top?: string;
|
||||
borderRadius?: string;
|
||||
/**
|
||||
* Checked shadow of content
|
||||
*
|
||||
* @designToken togglebutton.content.checked.shadow
|
||||
*/
|
||||
checkedShadow?: string;
|
||||
/**
|
||||
* Sm of content
|
||||
*/
|
||||
sm?: {
|
||||
/**
|
||||
* Sm padding of content
|
||||
*
|
||||
* @designToken togglebutton.content.sm.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Lg of content
|
||||
*/
|
||||
lg?: {
|
||||
/**
|
||||
* Lg padding of content
|
||||
*
|
||||
* @designToken togglebutton.content.lg.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
/**
|
||||
* Checked background of content
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue