Fixed #7085 - ProgressSpinner Token Names Invalid
parent
724a69d446
commit
a89625515e
|
@ -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')};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,28 +16,28 @@ export interface ProgressSpinnerDesignTokens extends ColorSchemeDesignToken<Prog
|
|||
*/
|
||||
root?: {
|
||||
/**
|
||||
* Color.1 of root
|
||||
* Color 1 of root
|
||||
*
|
||||
* @designToken progressspinner.color.1
|
||||
* @designToken progressspinner.color.one
|
||||
*/
|
||||
'color.1'?: string;
|
||||
colorOne?: string;
|
||||
/**
|
||||
* Color.2 of root
|
||||
* Color 2 of root
|
||||
*
|
||||
* @designToken progressspinner.color.2
|
||||
* @designToken progressspinner.color.two
|
||||
*/
|
||||
'color.2'?: string;
|
||||
colorTwo?: string;
|
||||
/**
|
||||
* Color.3 of root
|
||||
* Color 3 of root
|
||||
*
|
||||
* @designToken progressspinner.color.3
|
||||
* @designToken progressspinner.color.three
|
||||
*/
|
||||
'color.3'?: string;
|
||||
colorThree?: string;
|
||||
/**
|
||||
* Color.4 of root
|
||||
* Color 4 of root
|
||||
*
|
||||
* @designToken progressspinner.color.4
|
||||
* @designToken progressspinner.color.four
|
||||
*/
|
||||
'color.4'?: string;
|
||||
colorFour?: string;
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue