Updated tokens for Toast and Message

This commit is contained in:
Cagatay Civici 2024-05-09 18:22:29 +03:00
parent e239e64505
commit a8c70f981d
5 changed files with 278 additions and 95 deletions

View file

@ -33,7 +33,7 @@ export default {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: '{blue.100}',
focusRing: {
@ -46,7 +46,7 @@ export default {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: '{green.100}',
focusRing: {
@ -59,7 +59,7 @@ export default {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: '{yellow.100}',
focusRing: {
@ -72,7 +72,7 @@ export default {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: '{red.100}',
focusRing: {
@ -85,7 +85,7 @@ export default {
background: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.200}',
focusRing: {
@ -98,7 +98,7 @@ export default {
background: '{surface.900}',
borderColor: '{surface.950}',
color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.800}',
focusRing: {
@ -113,7 +113,7 @@ export default {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
@ -126,7 +126,7 @@ export default {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
@ -139,7 +139,7 @@ export default {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
@ -152,7 +152,7 @@ export default {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
@ -165,7 +165,7 @@ export default {
background: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.700}',
focusRing: {
@ -178,7 +178,7 @@ export default {
background: '{surface.0}',
borderColor: '{surface.100}',
color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.100}',
focusRing: {