@cerberus-design/panda-preset
Version:
The official Panda-CSS preset for the omni-federal design system
215 lines (213 loc) • 6.78 kB
JavaScript
import {
colors,
deepGetByPaths,
rawTokens
} from "./chunk-MPWXZKWE.js";
// src/theme/semantic-tokens/success.ts
var successTokens = {
success: {
border: {
initial: {
description: "The default border color of success elements.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.border.success.initial.$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.border.success.initial.$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.border.success.initial.$value
).$value
}
}
}
},
bg: {
initial: {
description: "The default background color of interactive elements that display a successful state.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.background.success.initial.$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.background.success.initial.$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.background.success.initial.$value
).$value
}
}
},
hover: {
description: "The default background color of interactive elements that display a successful state.",
value: {
_cerberusTheme: {
base: "#0B6B2C",
_lightMode: "#D0F0DB",
_darkMode: "#0B6B2C"
}
}
},
active: {
description: "The active surface color of interactive elements in a successful state.",
value: {
_cerberusTheme: {
base: "#41C16E",
_lightMode: "#0E8E3B",
_darkMode: "#41C16E"
}
}
}
},
surface: {
initial: {
description: "The default color for a static element (like a card, section, or page) in a successful state.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success.initial.$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.surface.success.initial.$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success.initial.$value
).$value
}
}
},
100: {
description: "The layer color above initial for a static element (like a card, section, or page) in a successful state.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success["100"].$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.surface.success["100"].$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success["100"].$value
).$value
}
}
},
200: {
description: "The layer color above 100 for a static element (like a card, section, or page) in a successful state.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success["200"].$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.surface.success["200"].$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.surface.success["200"].$value
).$value
}
}
}
},
text: {
initial: {
description: "The default text color of success elements.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success.initial.$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.text.success.initial.$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success.initial.$value
).$value
}
}
},
100: {
description: "The secondary text color of success elements.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success["100"].$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.text.success["100"].$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success["100"].$value
).$value
}
}
},
200: {
description: "The tertiary text color of success elements.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success["200"].$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.text.success["200"].$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success["200"].$value
).$value
}
}
},
inverse: {
description: "The text color of success elements when you need a light mode treatment within the dark mode.",
value: {
_cerberusTheme: {
base: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success.inverse.$value
).$value,
_lightMode: deepGetByPaths(
colors,
rawTokens.semanticColors.light.text.success.inverse.$value
).$value,
_darkMode: deepGetByPaths(
colors,
rawTokens.semanticColors.dark.text.success.inverse.$value
).$value
}
}
}
}
}
};
export {
successTokens
};
//# sourceMappingURL=chunk-NV7OJSE4.js.map