vira
Version:
A simple and highly versatile design system using element-vir.
144 lines (143 loc) • 4.54 kB
JavaScript
import { check } from '@augment-vir/assert';
import { getObjectTypedValues } from '@augment-vir/common';
import { ViraThemeColorName } from './vira-color-theme-object.js';
/**
* All available variants for controlling vira form colors.
*
* @category Internal
*/
export var ViraColorVariant;
(function (ViraColorVariant) {
/** @default blue colored */
ViraColorVariant["Info"] = "info";
/**
* Applied when no `color` input is set on a color-aware element.
*
* @default black colored
*/
ViraColorVariant["Plain"] = "plain";
/** @default grey colored */
ViraColorVariant["Neutral"] = "neutral";
/** @default red colored */
ViraColorVariant["Danger"] = "danger";
/** @default orange colored */
ViraColorVariant["Warning"] = "warning";
/** @default green colored */
ViraColorVariant["Positive"] = "positive";
/** @default brand colored */
ViraColorVariant["Brand"] = "brand";
/** @default purple colored */
ViraColorVariant["Special"] = "special";
/**
* No color variant styles will be applied at all, allowing the element's colors to be fully
* customized via its CSS vars.
*/
ViraColorVariant["Custom"] = "custom";
})(ViraColorVariant || (ViraColorVariant = {}));
/**
* All defined color variants starting with the default.
*
* @category Internal
*/
export const viraColorVariants = [
ViraColorVariant.Info,
ViraColorVariant.Plain,
ViraColorVariant.Neutral,
ViraColorVariant.Danger,
ViraColorVariant.Warning,
ViraColorVariant.Positive,
ViraColorVariant.Brand,
ViraColorVariant.Special,
];
/**
* Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
* class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
* intentionally omitted: they are always special-cased by each element so their host classes stay
* distinct from any theme color class (including `grey`).
*
* @category Internal
*/
export const viraColorVariantToHostClassKey = {
[ViraColorVariant.Info]: ViraThemeColorName.blue,
[ViraColorVariant.Danger]: ViraThemeColorName.red,
[ViraColorVariant.Warning]: ViraThemeColorName.yellow,
[ViraColorVariant.Positive]: ViraThemeColorName.green,
[ViraColorVariant.Brand]: ViraThemeColorName.brand,
[ViraColorVariant.Special]: ViraThemeColorName.purple,
};
/**
* {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
* {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
* each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
*
* @category Internal
*/
export const standaloneThemeColorNames = getObjectTypedValues(ViraThemeColorName).filter((colorName) => !check.hasValue(getObjectTypedValues(viraColorVariantToHostClassKey), colorName));
/**
* All available variants for controlling vira form sizes.
*
* @category Internal
*/
export var ViraSize;
(function (ViraSize) {
/** @default 40px tall */
ViraSize["Large"] = "large";
/**
* This is the default.
*
* @default 32px tall
*/
ViraSize["Medium"] = "medium";
/** @default 24px tall */
ViraSize["Small"] = "small";
/**
* No size styles will be applied at all. All related CSS vars are free to customize to your
* wishes.
*/
ViraSize["None"] = "none";
})(ViraSize || (ViraSize = {}));
/**
* All defined size variants starting with the default.
*
* @category Internal
*/
export const viraSizeVariants = [
ViraSize.Small,
ViraSize.Medium,
ViraSize.Large,
];
/**
* All available variants for controlling vira form emphasis.
*
* @category Internal
*/
export var ViraEmphasis;
(function (ViraEmphasis) {
/** This is the default. */
ViraEmphasis["Standard"] = "standard";
ViraEmphasis["Subtle"] = "subtle";
/**
* No emphasis styles will be applied at all. All related CSS vars are free to customize to your
* wishes.
*/
ViraEmphasis["None"] = "none";
})(ViraEmphasis || (ViraEmphasis = {}));
/**
* All defined emphasis variants starting with the default.
*
* @category Internal
*/
export const viraEmphasisVariants = [
ViraEmphasis.Standard,
ViraEmphasis.Subtle,
];
/**
* Default heights for {@link ViraSize} values.
*
* @category Internal
*/
export const viraSizeHeights = {
[ViraSize.Large]: 40,
[ViraSize.Medium]: 32,
[ViraSize.Small]: 24,
};