@mage-ui/preset 0.0.10

package/dist/semantic-tokens/colors.js

@@ -0,0 +1,969 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+
+const colors = defineSemanticTokens.colors({
+    neutral: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                focused: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                brand: {
+                    hovered: {
+                        value: {
+                            base: '{colors.primary.500}',
+                            _dark: '{colors.primary.100}'
+                        }
+                    }
+                },
+                onBrand: {
+                    enabled: {
+                        value: {
+                            base: '{colors.neutral.0}',
+                            _dark: '{colors.neutral.950}'
+                        }
+                    },
+                    selected: {
+                        value: {
+                            base: '{colors.neutral.0}',
+                            _dark: '{colors.neutral.950}'
+                        }
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.800}',
+                        _dark: '{colors.neutral.100}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.900}',
+                        _dark: '{colors.neutral.100}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.50}'
+                    }
+                },
+                brand: {
+                    hovered: {
+                        value: {
+                            base: '{colors.primary.600}',
+                            _dark: '{colors.primary.100}'
+                        }
+                    },
+                    actived: {
+                        value: {
+                            base: '{colors.primary.900}',
+                            _dark: '{colors.primary.100}'
+                        }
+                    },
+                    selected: {
+                        value: {
+                            base: '{colors.primary.900}',
+                            _dark: '{colors.primary.50}'
+                        }
+                    },
+                    selectedHovered: {
+                        value: {
+                            base: '{colors.primary.950}',
+                            _dark: '{colors.primary.50}'
+                        }
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.400}',
+                        _dark: '{colors.neutral.400}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                brand: {
+                    hovered: {
+                        value: {
+                            base: '{colors.primary.600}',
+                            _dark: '{colors.neutral.0}'
+                        }
+                    },
+                    actived: {
+                        value: {
+                            base: '{colors.primary.900}',
+                            _dark: '{colors.neutral.0}'
+                        }
+                    },
+                    selected: {
+                        value: {
+                            base: '{colors.primary.900}',
+                            _dark: '{colors.neutral.0}'
+                        }
+                    },
+                    selectedHovered: {
+                        value: {
+                            base: '{colors.primary.950}',
+                            _dark: '{colors.neutral.0}'
+                        }
+                    }
+                }
+            },
+            4: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.200}',
+                        _dark: '{colors.neutral.700}'
+                    }
+                }
+            },
+            static: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.950}'
+                    }
+                },
+                inverted: {
+                    enabled: {
+                        value: {
+                            base: '{colors.neutral.0}',
+                            _dark: '{colors.neutral.0}'
+                        }
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.0}',
+                        _dark: '{colors.neutral.850}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.20}',
+                        _dark: '{colors.neutral.900}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.30}',
+                        _dark: '{colors.neutral.950}'
+                    }
+                },
+                selected: {
+                    value: {
+                        base: '{colors.neutral.50}',
+                        _dark: '{colors.neutral.850}'
+                    }
+                },
+                alpha: {
+                    enabled: {
+                        value: {
+                            base: 'rgba(255, 255, 255, 0.5000)',
+                            _dark: 'rgba(38, 38, 38, 0.5000)'
+                        }
+                    }
+                },
+                brand: {
+                    selected: {
+                        value: {
+                            base: '{colors.primary.400}',
+                            _dark: '{colors.primary.500}'
+                        }
+                    },
+                    actived: {
+                        value: {
+                            base: '{colors.primary.400}',
+                            _dark: '{colors.primary.700}'
+                        }
+                    },
+                    selectedHovered: {
+                        value: {
+                            base: '{colors.primary.500}',
+                            _dark: '{colors.primary.700}'
+                        }
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.50}',
+                        _dark: '{colors.neutral.800}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.1000/5}',
+                        _dark: '{colors.neutral.0/5}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.1000/10}',
+                        _dark: '{colors.neutral.0/10}'
+                    }
+                },
+                brand: {
+                    selected: {
+                        value: {
+                            base: '{colors.primary.200}',
+                            _dark: '{colors.primary.300}'
+                        }
+                    },
+                    actived: {
+                        value: {
+                            base: '{colors.primary.300}',
+                            _dark: '{colors.primary.400}'
+                        }
+                    },
+                    selectedHovered: {
+                        value: {
+                            base: '{colors.primary.300}',
+                            _dark: '{colors.primary.400}'
+                        }
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.100}',
+                        _dark: '{colors.neutral.700}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.100}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.200}',
+                        _dark: '{colors.neutral.700}'
+                    }
+                }
+            },
+            4: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.200}',
+                        _dark: '{colors.neutral.900}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.50}',
+                        _dark: '{colors.neutral.900}'
+                    }
+                }
+            },
+            5: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.300}',
+                        _dark: '{colors.neutral.600}'
+                    }
+                },
+                brand: {
+                    selected: {
+                        value: {
+                            base: '{colors.primary.500}',
+                            _dark: '{colors.primary.500}'
+                        }
+                    }
+                }
+            },
+            6: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.800}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.900}',
+                        _dark: '{colors.neutral.50}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                }
+            },
+            7: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.200}',
+                        _dark: '{colors.neutral.200}'
+                    }
+                },
+                brand: {
+                    hovered: {
+                        value: {
+                            base: '{colors.primary.500}',
+                            _dark: '{colors.primary.500}'
+                        }
+                    }
+                }
+            },
+            static: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.1000}',
+                        _dark: '{colors.neutral.1000}'
+                    }
+                },
+                inverted: {
+                    value: {
+                        base: '{colors.neutral.0}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.500/10}',
+                        _dark: '{colors.neutral.500/10}'
+                    }
+                }
+            }
+        },
+        stroke: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                onBrand: {
+                    selected: {
+                        value: {
+                            base: '{colors.neutral.0}',
+                            _dark: '{colors.neutral.950}'
+                        }
+                    }
+                },
+                brand: {
+                    hovered: {
+                        value: {
+                            base: '{colors.primary.300}',
+                            _dark: '{colors.primary.300}'
+                        }
+                    },
+                    selected: {
+                        value: {
+                            base: '{colors.primary.300}',
+                            _dark: '{colors.primary.300}'
+                        }
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.950}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.200}',
+                        _dark: '{colors.neutral.200}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.100}',
+                        _dark: '{colors.neutral.100}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.50}',
+                        _dark: '{colors.neutral.50}'
+                    }
+                }
+            },
+            4: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.400}',
+                        _dark: '{colors.neutral.400}'
+                    }
+                }
+            },
+            5: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.600}',
+                        _dark: '{colors.neutral.600}'
+                    }
+                },
+                selected: {
+                    value: {
+                        base: '{colors.neutral.400}',
+                        _dark: '{colors.neutral.400}'
+                    }
+                }
+            },
+            6: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.500}',
+                        _dark: '{colors.neutral.500}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.0}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                }
+            },
+            7: {
+                enabled: {
+                    value: {
+                        base: '{colors.neutral.100}',
+                        _dark: '{colors.neutral.600}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.neutral.500}',
+                        _dark: '{colors.neutral.400}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.neutral.600}',
+                        _dark: '{colors.neutral.300}'
+                    }
+                }
+            }
+        },
+        effect: {
+            1: {
+                enabled: {
+                    value: {
+                        base: 'rgba(255, 255, 255, 0.1500)',
+                        _dark: 'rgba(38, 38, 38, 0.1500)'
+                    }
+                }
+            }
+        }
+    },
+    primary: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.600}',
+                        _dark: '{colors.neutral.0}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.300}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.primary.600}',
+                        _dark: '{colors.primary.200}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.primary.700}',
+                        _dark: '{colors.primary.100}'
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.500}'
+                    }
+                }
+            },
+            4: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.900}',
+                        _dark: '{colors.primary.200}'
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.600}',
+                        _dark: '{colors.primary.400}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.400}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.primary.600}',
+                        _dark: '{colors.primary.300}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.primary.700}',
+                        _dark: '{colors.primary.400}'
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.400}',
+                        _dark: '{colors.primary.700}'
+                    }
+                }
+            },
+            4: {
+                hovered: {
+                    value: {
+                        base: '{colors.primary.100}',
+                        _dark: '{colors.primary.900}'
+                    }
+                }
+            },
+            5: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.100}',
+                        _dark: '{colors.primary.700}'
+                    }
+                },
+                selected: {
+                    value: {
+                        base: '{colors.primary.600}',
+                        _dark: '{colors.primary.400}'
+                    }
+                }
+            },
+            neutral: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.100}',
+                        _dark: '{colors.neutral.800}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500/20}',
+                        _dark: '{colors.primary.500/20}'
+                    }
+                }
+            }
+        },
+        stroke: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.200}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.200}'
+                    }
+                },
+                focused: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.300}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.300}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.300}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.primary.500}',
+                        _dark: '{colors.primary.200}'
+                    }
+                }
+            },
+            3: {
+                enabled: {
+                    value: {
+                        base: '{colors.primary.200}',
+                        _dark: '{colors.primary.500}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.primary.300}',
+                        _dark: '{colors.primary.600}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.primary.400}',
+                        _dark: '{colors.primary.500}'
+                    }
+                }
+            }
+        },
+        effect: {
+            1: {
+                pressed: {
+                    value: {
+                        base: '{colors.primary.700}',
+                        _dark: '{colors.primary.100}'
+                    }
+                }
+            }
+        }
+    },
+    secondary: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.secondary.500}',
+                        _dark: '{colors.secondary.500}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.secondary.800}',
+                        _dark: '{colors.secondary.200}'
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.secondary.500}',
+                        _dark: '{colors.secondary.500}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.secondary.500/30}',
+                        _dark: '{colors.secondary.500/30}'
+                    }
+                }
+            }
+        }
+    },
+    success: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.success.300}',
+                        _dark: '{colors.success.500}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.success.800}',
+                        _dark: '{colors.success.200}'
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.success.500}',
+                        _dark: '{colors.success.600}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.success.500/30}',
+                        _dark: '{colors.success.500/30}'
+                    }
+                }
+            }
+        }
+    },
+    warning: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.warning.500}',
+                        _dark: '{colors.warning.500}'
+                    }
+                }
+            },
+            2: {
+                enabled: {
+                    value: {
+                        base: '{colors.warning.900}',
+                        _dark: '{colors.warning.200}'
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.warning.500}',
+                        _dark: '{colors.warning.600}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.warning.500/30}',
+                        _dark: '{colors.warning.500/30}'
+                    }
+                }
+            }
+        }
+    },
+    danger: {
+        foreground: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                }
+            }
+        },
+        background: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.error.600}',
+                        _dark: '{colors.error.500}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.error.700}',
+                        _dark: '{colors.error.400}'
+                    }
+                }
+            },
+            alpha: {
+                enabled: {
+                    value: {
+                        base: '{colors.error.500/20}',
+                        _dark: '{colors.error.500/20}'
+                    }
+                }
+            }
+        },
+        stroke: {
+            1: {
+                enabled: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                hovered: {
+                    value: {
+                        base: '{colors.error.600}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                actived: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                },
+                focused: {
+                    value: {
+                        base: '{colors.error.400}',
+                        _dark: '{colors.error.400}'
+                    }
+                }
+            }
+        }
+    },
+    gradients: {
+        100: {
+            from: {
+                value: {
+                    base: '{colors.primary.500}',
+                    _dark: '{colors.secondary.500}'
+                }
+            },
+            to: {
+                value: {
+                    base: '{colors.secondary.500}',
+                    _dark: '{colors.primary.500}'
+                }
+            }
+        },
+        200: {
+            from: {
+                value: {
+                    base: '{colors.primary.200}',
+                    _dark: '{colors.primary.800}'
+                }
+            },
+            to: {
+                value: {
+                    base: '{colors.neutral.150}',
+                    _dark: '{colors.primary.600}'
+                }
+            }
+        },
+        300: {
+            from: {
+                value: {
+                    base: '{colors.primary.400}',
+                    _dark: '{colors.primary.500}'
+                }
+            },
+            to: {
+                value: {
+                    base: '{colors.neutral.200}',
+                    _dark: '{colors.neutral.500}'
+                }
+            }
+        },
+        400: {
+            from: {
+                value: {
+                    base: '{colors.primary.200}',
+                    _dark: '{colors.primary.800}'
+                }
+            },
+            to: {
+                value: {
+                    base: '{colors.secondary.500}',
+                    _dark: '{colors.secondary.400}'
+                }
+            }
+        },
+        500: {
+            from: {
+                value: {
+                    base: '{colors.secondary.500}',
+                    _dark: '{colors.secondary.400}'
+                }
+            },
+            to: {
+                value: {
+                    base: '{colors.primary.200}',
+                    _dark: '{colors.primary.800}'
+                }
+            }
+        }
+    }
+});
+
+export { colors };
+//# sourceMappingURL=colors.js.map