@@ -52,7 +52,7 @@ const MarkerBar = ({
className={ classNames(
'tr-ring-2 tr-mx-auto',
primaryBgColor,
- getColorVariantsFromColorThemeValue(defaultColors.white).ringRolor,
+ getColorVariantsFromColorThemeValue(defaultColors.white).ringColor,
sizing.md.height,
sizing.twoXs.width,
borderRadius.lg.all,
diff --git a/src/components/vis-elements/RangeBar/RangeBar.tsx b/src/components/vis-elements/RangeBar/RangeBar.tsx
index ac776f02d..7084e37d6 100644
--- a/src/components/vis-elements/RangeBar/RangeBar.tsx
+++ b/src/components/vis-elements/RangeBar/RangeBar.tsx
@@ -62,7 +62,7 @@ const RangeBar = ({
@@ -70,7 +70,7 @@ const RangeBar = ({
className={ classNames(
'tr-ring-2 tr-mx-auto',
getColorVariantsFromColorThemeValue(getColorTheme(color).background).bgColor,
- getColorVariantsFromColorThemeValue(defaultColors.white).ringRolor,
+ getColorVariantsFromColorThemeValue(defaultColors.white).ringColor,
sizing.md.height,
sizing.twoXs.width,
borderRadius.lg.all,
diff --git a/src/lib/classnameUtils.ts b/src/lib/classnameUtils.ts
index 7600773c4..e6cd9a1c3 100644
--- a/src/lib/classnameUtils.ts
+++ b/src/lib/classnameUtils.ts
@@ -35,7 +35,7 @@ export const getHexFromColorThemeValue = (colorThemeValue: string): string => {
const colorThemeValueParts = colorThemeValue.split('-');
if (!colorThemeValue || colorThemeValueParts.length != 2) return '';
const baseColor = colorThemeValueParts[0];
- // Currenlty only 500 is supported
+ // Currently only 500 is supported
const hexValue = twColorsHex[baseColor][500];
return hexValue;
};
diff --git a/src/lib/colorVariantMapping.ts b/src/lib/colorVariantMapping.ts
index 64b608db1..5584b5bd2 100644
--- a/src/lib/colorVariantMapping.ts
+++ b/src/lib/colorVariantMapping.ts
@@ -5,7 +5,8 @@ export type ColorTypes = {
hoverTextColor: string,
borderColor: string,
hoverBorderColor: string,
- ringRolor: string,
+ ringRolor: string, // legacy prop
+ ringColor: string,
hoverRingColor: string,
divideColor: string,
outlineColor: string,
@@ -22,6 +23,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-transparent',
hoverBorderColor: 'hover:tr-border-transparent',
ringRolor: 'tr-ring-transparent',
+ ringColor: 'tr-ring-transparent',
hoverRingColor: 'hover:tr-ring-transparent',
divideColor: 'tr-divide-transparent',
outlineColor: 'tr-outline-transparent',
@@ -37,6 +39,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-white',
hoverBorderColor: 'hover:tr-border-white',
ringRolor: 'tr-ring-white',
+ ringColor: 'tr-ring-white',
hoverRingColor: 'hover:tr-ring-white',
divideColor: 'tr-divide-white',
outlineColor: 'tr-outline-white',
@@ -52,6 +55,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-black',
hoverBorderColor: 'hover:tr-border-black',
ringRolor: 'tr-ring-black',
+ ringColor: 'tr-ring-black',
hoverRingColor: 'hover:tr-ring-black',
divideColor: 'tr-divide-black',
outlineColor: 'tr-outline-black',
@@ -67,6 +71,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-50',
hoverBorderColor: 'hover:tr-border-slate-50',
ringRolor: 'tr-ring-slate-50',
+ ringColor: 'tr-ring-slate-50',
hoverRingColor: 'hover:tr-ring-slate-50',
divideColor: 'tr-divide-slate-50',
outlineColor: 'tr-outline-slate-50',
@@ -80,6 +85,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-100',
hoverBorderColor: 'hover:tr-border-slate-100',
ringRolor: 'tr-ring-slate-100',
+ ringColor: 'tr-ring-slate-100',
hoverRingColor: 'hover:tr-ring-slate-100',
divideColor: 'tr-divide-slate-100',
outlineColor: 'tr-outline-slate-100',
@@ -93,6 +99,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-200',
hoverBorderColor: 'hover:tr-border-slate-200',
ringRolor: 'tr-ring-slate-200',
+ ringColor: 'tr-ring-slate-200',
hoverRingColor: 'hover:tr-ring-slate-200',
divideColor: 'tr-divide-slate-200',
outlineColor: 'tr-outline-slate-200',
@@ -106,6 +113,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-300',
hoverBorderColor: 'hover:tr-border-slate-300',
ringRolor: 'tr-ring-slate-300',
+ ringColor: 'tr-ring-slate-300',
hoverRingColor: 'hover:tr-ring-slate-300',
divideColor: 'tr-divide-slate-300',
outlineColor: 'tr-outline-slate-300',
@@ -119,6 +127,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-400',
hoverBorderColor: 'hover:tr-border-slate-400',
ringRolor: 'tr-ring-slate-400',
+ ringColor: 'tr-ring-slate-400',
hoverRingColor: 'hover:tr-ring-slate-400',
divideColor: 'tr-divide-slate-400',
outlineColor: 'tr-outline-slate-400',
@@ -132,6 +141,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-500',
hoverBorderColor: 'hover:tr-border-slate-500',
ringRolor: 'tr-ring-slate-500',
+ ringColor: 'tr-ring-slate-500',
hoverRingColor: 'hover:tr-ring-slate-500',
divideColor: 'tr-divide-slate-500',
outlineColor: 'tr-outline-slate-500',
@@ -145,6 +155,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-600',
hoverBorderColor: 'hover:tr-border-slate-600',
ringRolor: 'tr-ring-slate-600',
+ ringColor: 'tr-ring-slate-600',
hoverRingColor: 'hover:tr-ring-slate-600',
divideColor: 'tr-divide-slate-600',
outlineColor: 'tr-outline-slate-600',
@@ -158,6 +169,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-700',
hoverBorderColor: 'hover:tr-border-slate-700',
ringRolor: 'tr-ring-slate-700',
+ ringColor: 'tr-ring-slate-700',
hoverRingColor: 'hover:tr-ring-slate-700',
divideColor: 'tr-divide-slate-700',
outlineColor: 'tr-outline-slate-700',
@@ -171,6 +183,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-800',
hoverBorderColor: 'hover:tr-border-slate-800',
ringRolor: 'tr-ring-slate-800',
+ ringColor: 'tr-ring-slate-800',
hoverRingColor: 'hover:tr-ring-slate-800',
divideColor: 'tr-divide-slate-800',
outlineColor: 'tr-outline-slate-800',
@@ -184,6 +197,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-slate-900',
hoverBorderColor: 'hover:tr-border-slate-900',
ringRolor: 'tr-ring-slate-900',
+ ringColor: 'tr-ring-slate-900',
hoverRingColor: 'hover:tr-ring-slate-900',
divideColor: 'tr-divide-slate-900',
outlineColor: 'tr-outline-slate-900',
@@ -199,6 +213,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-50',
hoverBorderColor: 'hover:tr-border-gray-50',
ringRolor: 'tr-ring-gray-50',
+ ringColor: 'tr-ring-gray-50',
hoverRingColor: 'hover:tr-ring-gray-50',
divideColor: 'tr-divide-gray-50',
outlineColor: 'tr-outline-gray-50',
@@ -212,6 +227,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-100',
hoverBorderColor: 'hover:tr-border-gray-100',
ringRolor: 'tr-ring-gray-100',
+ ringColor: 'tr-ring-gray-100',
hoverRingColor: 'hover:tr-ring-gray-100',
divideColor: 'tr-divide-gray-100',
outlineColor: 'tr-outline-gray-100',
@@ -225,6 +241,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-200',
hoverBorderColor: 'hover:tr-border-gray-200',
ringRolor: 'tr-ring-gray-200',
+ ringColor: 'tr-ring-gray-200',
hoverRingColor: 'hover:tr-ring-gray-200',
divideColor: 'tr-divide-gray-200',
outlineColor: 'tr-outline-gray-200',
@@ -238,6 +255,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-300',
hoverBorderColor: 'hover:tr-border-gray-300',
ringRolor: 'tr-ring-gray-300',
+ ringColor: 'tr-ring-gray-300',
hoverRingColor: 'hover:tr-ring-gray-300',
divideColor: 'tr-divide-gray-300',
outlineColor: 'tr-outline-gray-300',
@@ -251,6 +269,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-400',
hoverBorderColor: 'hover:tr-border-gray-400',
ringRolor: 'tr-ring-gray-400',
+ ringColor: 'tr-ring-gray-400',
hoverRingColor: 'hover:tr-ring-gray-400',
divideColor: 'tr-divide-gray-400',
outlineColor: 'tr-outline-gray-400',
@@ -264,6 +283,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-500',
hoverBorderColor: 'hover:tr-border-gray-500',
ringRolor: 'tr-ring-gray-500',
+ ringColor: 'tr-ring-gray-500',
hoverRingColor: 'hover:tr-ring-gray-500',
divideColor: 'tr-divide-gray-500',
outlineColor: 'tr-outline-gray-500',
@@ -277,6 +297,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-600',
hoverBorderColor: 'hover:tr-border-gray-600',
ringRolor: 'tr-ring-gray-600',
+ ringColor: 'tr-ring-gray-600',
hoverRingColor: 'hover:tr-ring-gray-600',
divideColor: 'tr-divide-gray-600',
outlineColor: 'tr-outline-gray-600',
@@ -290,6 +311,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-700',
hoverBorderColor: 'hover:tr-border-gray-700',
ringRolor: 'tr-ring-gray-700',
+ ringColor: 'tr-ring-gray-700',
hoverRingColor: 'hover:tr-ring-gray-700',
divideColor: 'tr-divide-gray-700',
outlineColor: 'tr-outline-gray-700',
@@ -303,6 +325,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-800',
hoverBorderColor: 'hover:tr-border-gray-800',
ringRolor: 'tr-ring-gray-800',
+ ringColor: 'tr-ring-gray-800',
hoverRingColor: 'hover:tr-ring-gray-800',
divideColor: 'tr-divide-gray-800',
outlineColor: 'tr-outline-gray-800',
@@ -316,6 +339,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-gray-900',
hoverBorderColor: 'hover:tr-border-gray-900',
ringRolor: 'tr-ring-gray-900',
+ ringColor: 'tr-ring-gray-900',
hoverRingColor: 'hover:tr-ring-gray-900',
divideColor: 'tr-divide-gray-900',
outlineColor: 'tr-outline-gray-900',
@@ -331,6 +355,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-50',
hoverBorderColor: 'hover:tr-border-zinc-50',
ringRolor: 'tr-ring-zinc-50',
+ ringColor: 'tr-ring-zinc-50',
hoverRingColor: 'hover:tr-ring-zinc-50',
divideColor: 'tr-divide-zinc-50',
outlineColor: 'tr-outline-zinc-50',
@@ -344,6 +369,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-100',
hoverBorderColor: 'hover:tr-border-zinc-100',
ringRolor: 'tr-ring-zinc-100',
+ ringColor: 'tr-ring-zinc-100',
hoverRingColor: 'hover:tr-ring-zinc-100',
divideColor: 'tr-divide-zinc-100',
outlineColor: 'tr-outline-zinc-100',
@@ -357,6 +383,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-200',
hoverBorderColor: 'hover:tr-border-zinc-200',
ringRolor: 'tr-ring-zinc-200',
+ ringColor: 'tr-ring-zinc-200',
hoverRingColor: 'hover:tr-ring-zinc-200',
divideColor: 'tr-divide-zinc-200',
outlineColor: 'tr-outline-zinc-200',
@@ -370,6 +397,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-300',
hoverBorderColor: 'hover:tr-border-zinc-300',
ringRolor: 'tr-ring-zinc-300',
+ ringColor: 'tr-ring-zinc-300',
hoverRingColor: 'hover:tr-ring-zinc-300',
divideColor: 'tr-divide-zinc-300',
outlineColor: 'tr-outline-zinc-300',
@@ -383,6 +411,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-400',
hoverBorderColor: 'hover:tr-border-zinc-400',
ringRolor: 'tr-ring-zinc-400',
+ ringColor: 'tr-ring-zinc-400',
hoverRingColor: 'hover:tr-ring-zinc-400',
divideColor: 'tr-divide-zinc-400',
outlineColor: 'tr-outline-zinc-400',
@@ -396,6 +425,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-500',
hoverBorderColor: 'hover:tr-border-zinc-500',
ringRolor: 'tr-ring-zinc-500',
+ ringColor: 'tr-ring-zinc-500',
hoverRingColor: 'hover:tr-ring-zinc-500',
divideColor: 'tr-divide-zinc-500',
outlineColor: 'tr-outline-zinc-500',
@@ -409,6 +439,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-600',
hoverBorderColor: 'hover:tr-border-zinc-600',
ringRolor: 'tr-ring-zinc-600',
+ ringColor: 'tr-ring-zinc-600',
hoverRingColor: 'hover:tr-ring-zinc-600',
divideColor: 'tr-divide-zinc-600',
outlineColor: 'tr-outline-zinc-600',
@@ -422,6 +453,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-700',
hoverBorderColor: 'hover:tr-border-zinc-700',
ringRolor: 'tr-ring-zinc-700',
+ ringColor: 'tr-ring-zinc-700',
hoverRingColor: 'hover:tr-ring-zinc-700',
divideColor: 'tr-divide-zinc-700',
outlineColor: 'tr-outline-zinc-700',
@@ -435,6 +467,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-800',
hoverBorderColor: 'hover:tr-border-zinc-800',
ringRolor: 'tr-ring-zinc-800',
+ ringColor: 'tr-ring-zinc-800',
hoverRingColor: 'hover:tr-ring-zinc-800',
divideColor: 'tr-divide-zinc-800',
outlineColor: 'tr-outline-zinc-800',
@@ -448,6 +481,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-zinc-900',
hoverBorderColor: 'hover:tr-border-zinc-900',
ringRolor: 'tr-ring-zinc-900',
+ ringColor: 'tr-ring-zinc-900',
hoverRingColor: 'hover:tr-ring-zinc-900',
divideColor: 'tr-divide-zinc-900',
outlineColor: 'tr-outline-zinc-900',
@@ -463,6 +497,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-50',
hoverBorderColor: 'hover:tr-border-neutral-50',
ringRolor: 'tr-ring-neutral-50',
+ ringColor: 'tr-ring-neutral-50',
hoverRingColor: 'hover:tr-ring-neutral-50',
divideColor: 'tr-divide-neutral-50',
outlineColor: 'tr-outline-neutral-50',
@@ -476,6 +511,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-100',
hoverBorderColor: 'hover:tr-border-neutral-100',
ringRolor: 'tr-ring-neutral-100',
+ ringColor: 'tr-ring-neutral-100',
hoverRingColor: 'hover:tr-ring-neutral-100',
divideColor: 'tr-divide-neutral-100',
outlineColor: 'tr-outline-neutral-100',
@@ -489,6 +525,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-200',
hoverBorderColor: 'hover:tr-border-neutral-200',
ringRolor: 'tr-ring-neutral-200',
+ ringColor: 'tr-ring-neutral-200',
hoverRingColor: 'hover:tr-ring-neutral-200',
divideColor: 'tr-divide-neutral-200',
outlineColor: 'tr-outline-neutral-200',
@@ -502,6 +539,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-300',
hoverBorderColor: 'hover:tr-border-neutral-300',
ringRolor: 'tr-ring-neutral-300',
+ ringColor: 'tr-ring-neutral-300',
hoverRingColor: 'hover:tr-ring-neutral-300',
divideColor: 'tr-divide-neutral-300',
outlineColor: 'tr-outline-neutral-300',
@@ -515,6 +553,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-400',
hoverBorderColor: 'hover:tr-border-neutral-400',
ringRolor: 'tr-ring-neutral-400',
+ ringColor: 'tr-ring-neutral-400',
hoverRingColor: 'hover:tr-ring-neutral-400',
divideColor: 'tr-divide-neutral-400',
outlineColor: 'tr-outline-neutral-400',
@@ -528,6 +567,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-500',
hoverBorderColor: 'hover:tr-border-neutral-500',
ringRolor: 'tr-ring-neutral-500',
+ ringColor: 'tr-ring-neutral-500',
hoverRingColor: 'hover:tr-ring-neutral-500',
divideColor: 'tr-divide-neutral-500',
outlineColor: 'tr-outline-neutral-500',
@@ -541,6 +581,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-600',
hoverBorderColor: 'hover:tr-border-neutral-600',
ringRolor: 'tr-ring-neutral-600',
+ ringColor: 'tr-ring-neutral-600',
hoverRingColor: 'hover:tr-ring-neutral-600',
divideColor: 'tr-divide-neutral-600',
outlineColor: 'tr-outline-neutral-600',
@@ -554,6 +595,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-700',
hoverBorderColor: 'hover:tr-border-neutral-700',
ringRolor: 'tr-ring-neutral-700',
+ ringColor: 'tr-ring-neutral-700',
hoverRingColor: 'hover:tr-ring-neutral-700',
divideColor: 'tr-divide-neutral-700',
outlineColor: 'tr-outline-neutral-700',
@@ -567,6 +609,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-800',
hoverBorderColor: 'hover:tr-border-neutral-800',
ringRolor: 'tr-ring-neutral-800',
+ ringColor: 'tr-ring-neutral-800',
hoverRingColor: 'hover:tr-ring-neutral-800',
divideColor: 'tr-divide-neutral-800',
outlineColor: 'tr-outline-neutral-800',
@@ -580,6 +623,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-neutral-900',
hoverBorderColor: 'hover:tr-border-neutral-900',
ringRolor: 'tr-ring-neutral-900',
+ ringColor: 'tr-ring-neutral-900',
hoverRingColor: 'hover:tr-ring-neutral-900',
divideColor: 'tr-divide-neutral-900',
outlineColor: 'tr-outline-neutral-900',
@@ -595,6 +639,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-50',
hoverBorderColor: 'hover:tr-border-stone-50',
ringRolor: 'tr-ring-stone-50',
+ ringColor: 'tr-ring-stone-50',
hoverRingColor: 'hover:tr-ring-stone-50',
divideColor: 'tr-divide-stone-50',
outlineColor: 'tr-outline-stone-50',
@@ -608,6 +653,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-100',
hoverBorderColor: 'hover:tr-border-stone-100',
ringRolor: 'tr-ring-stone-100',
+ ringColor: 'tr-ring-stone-100',
hoverRingColor: 'hover:tr-ring-stone-100',
divideColor: 'tr-divide-stone-100',
outlineColor: 'tr-outline-stone-100',
@@ -621,6 +667,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-200',
hoverBorderColor: 'hover:tr-border-stone-200',
ringRolor: 'tr-ring-stone-200',
+ ringColor: 'tr-ring-stone-200',
hoverRingColor: 'hover:tr-ring-stone-200',
divideColor: 'tr-divide-stone-200',
outlineColor: 'tr-outline-stone-200',
@@ -634,6 +681,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-300',
hoverBorderColor: 'hover:tr-border-stone-300',
ringRolor: 'tr-ring-stone-300',
+ ringColor: 'tr-ring-stone-300',
hoverRingColor: 'hover:tr-ring-stone-300',
divideColor: 'tr-divide-stone-300',
outlineColor: 'tr-outline-stone-300',
@@ -647,6 +695,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-400',
hoverBorderColor: 'hover:tr-border-stone-400',
ringRolor: 'tr-ring-stone-400',
+ ringColor: 'tr-ring-stone-400',
hoverRingColor: 'hover:tr-ring-stone-400',
divideColor: 'tr-divide-stone-400',
outlineColor: 'tr-outline-stone-400',
@@ -660,6 +709,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-500',
hoverBorderColor: 'hover:tr-border-stone-500',
ringRolor: 'tr-ring-stone-500',
+ ringColor: 'tr-ring-stone-500',
hoverRingColor: 'hover:tr-ring-stone-500',
divideColor: 'tr-divide-stone-500',
outlineColor: 'tr-outline-stone-500',
@@ -673,6 +723,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-600',
hoverBorderColor: 'hover:tr-border-stone-600',
ringRolor: 'tr-ring-stone-600',
+ ringColor: 'tr-ring-stone-600',
hoverRingColor: 'hover:tr-ring-stone-600',
divideColor: 'tr-divide-stone-600',
outlineColor: 'tr-outline-stone-600',
@@ -686,6 +737,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-700',
hoverBorderColor: 'hover:tr-border-stone-700',
ringRolor: 'tr-ring-stone-700',
+ ringColor: 'tr-ring-stone-700',
hoverRingColor: 'hover:tr-ring-stone-700',
divideColor: 'tr-divide-stone-700',
outlineColor: 'tr-outline-stone-700',
@@ -699,6 +751,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-800',
hoverBorderColor: 'hover:tr-border-stone-800',
ringRolor: 'tr-ring-stone-800',
+ ringColor: 'tr-ring-stone-800',
hoverRingColor: 'hover:tr-ring-stone-800',
divideColor: 'tr-divide-stone-800',
outlineColor: 'tr-outline-stone-800',
@@ -712,6 +765,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-stone-900',
hoverBorderColor: 'hover:tr-border-stone-900',
ringRolor: 'tr-ring-stone-900',
+ ringColor: 'tr-ring-stone-900',
hoverRingColor: 'hover:tr-ring-stone-900',
divideColor: 'tr-divide-stone-900',
outlineColor: 'tr-outline-stone-900',
@@ -727,6 +781,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-50',
hoverBorderColor: 'hover:tr-border-red-50',
ringRolor: 'tr-ring-red-50',
+ ringColor: 'tr-ring-red-50',
hoverRingColor: 'hover:tr-ring-red-50',
divideColor: 'tr-divide-red-50',
outlineColor: 'tr-outline-red-50',
@@ -740,6 +795,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-100',
hoverBorderColor: 'hover:tr-border-red-100',
ringRolor: 'tr-ring-red-100',
+ ringColor: 'tr-ring-red-100',
hoverRingColor: 'hover:tr-ring-red-100',
divideColor: 'tr-divide-red-100',
outlineColor: 'tr-outline-red-100',
@@ -753,6 +809,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-200',
hoverBorderColor: 'hover:tr-border-red-200',
ringRolor: 'tr-ring-red-200',
+ ringColor: 'tr-ring-red-200',
hoverRingColor: 'hover:tr-ring-red-200',
divideColor: 'tr-divide-red-200',
outlineColor: 'tr-outline-red-200',
@@ -766,6 +823,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-300',
hoverBorderColor: 'hover:tr-border-red-300',
ringRolor: 'tr-ring-red-300',
+ ringColor: 'tr-ring-red-300',
hoverRingColor: 'hover:tr-ring-red-300',
divideColor: 'tr-divide-red-300',
outlineColor: 'tr-outline-red-300',
@@ -779,6 +837,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-400',
hoverBorderColor: 'hover:tr-border-red-400',
ringRolor: 'tr-ring-red-400',
+ ringColor: 'tr-ring-red-400',
hoverRingColor: 'hover:tr-ring-red-400',
divideColor: 'tr-divide-red-400',
outlineColor: 'tr-outline-red-400',
@@ -792,6 +851,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-500',
hoverBorderColor: 'hover:tr-border-red-500',
ringRolor: 'tr-ring-red-500',
+ ringColor: 'tr-ring-red-500',
hoverRingColor: 'hover:tr-ring-red-500',
divideColor: 'tr-divide-red-500',
outlineColor: 'tr-outline-red-500',
@@ -805,6 +865,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-600',
hoverBorderColor: 'hover:tr-border-red-600',
ringRolor: 'tr-ring-red-600',
+ ringColor: 'tr-ring-red-600',
hoverRingColor: 'hover:tr-ring-red-600',
divideColor: 'tr-divide-red-600',
outlineColor: 'tr-outline-red-600',
@@ -818,6 +879,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-700',
hoverBorderColor: 'hover:tr-border-red-700',
ringRolor: 'tr-ring-red-700',
+ ringColor: 'tr-ring-red-700',
hoverRingColor: 'hover:tr-ring-red-700',
divideColor: 'tr-divide-red-700',
outlineColor: 'tr-outline-red-700',
@@ -831,6 +893,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-800',
hoverBorderColor: 'hover:tr-border-red-800',
ringRolor: 'tr-ring-red-800',
+ ringColor: 'tr-ring-red-800',
hoverRingColor: 'hover:tr-ring-red-800',
divideColor: 'tr-divide-red-800',
outlineColor: 'tr-outline-red-800',
@@ -844,6 +907,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-red-900',
hoverBorderColor: 'hover:tr-border-red-900',
ringRolor: 'tr-ring-red-900',
+ ringColor: 'tr-ring-red-900',
hoverRingColor: 'hover:tr-ring-red-900',
divideColor: 'tr-divide-red-900',
outlineColor: 'tr-outline-red-900',
@@ -859,6 +923,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-50',
hoverBorderColor: 'hover:tr-border-orange-50',
ringRolor: 'tr-ring-orange-50',
+ ringColor: 'tr-ring-orange-50',
hoverRingColor: 'hover:tr-ring-orange-50',
divideColor: 'tr-divide-orange-50',
outlineColor: 'tr-outline-orange-50',
@@ -872,6 +937,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-100',
hoverBorderColor: 'hover:tr-border-orange-100',
ringRolor: 'tr-ring-orange-100',
+ ringColor: 'tr-ring-orange-100',
hoverRingColor: 'hover:tr-ring-orange-100',
divideColor: 'tr-divide-orange-100',
outlineColor: 'tr-outline-orange-100',
@@ -885,6 +951,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-200',
hoverBorderColor: 'hover:tr-border-orange-200',
ringRolor: 'tr-ring-orange-200',
+ ringColor: 'tr-ring-orange-200',
hoverRingColor: 'hover:tr-ring-orange-200',
divideColor: 'tr-divide-orange-200',
outlineColor: 'tr-outline-orange-200',
@@ -898,6 +965,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-300',
hoverBorderColor: 'hover:tr-border-orange-300',
ringRolor: 'tr-ring-orange-300',
+ ringColor: 'tr-ring-orange-300',
hoverRingColor: 'hover:tr-ring-orange-300',
divideColor: 'tr-divide-orange-300',
outlineColor: 'tr-outline-orange-300',
@@ -911,6 +979,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-400',
hoverBorderColor: 'hover:tr-border-orange-400',
ringRolor: 'tr-ring-orange-400',
+ ringColor: 'tr-ring-orange-400',
hoverRingColor: 'hover:tr-ring-orange-400',
divideColor: 'tr-divide-orange-400',
outlineColor: 'tr-outline-orange-400',
@@ -924,6 +993,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-500',
hoverBorderColor: 'hover:tr-border-orange-500',
ringRolor: 'tr-ring-orange-500',
+ ringColor: 'tr-ring-orange-500',
hoverRingColor: 'hover:tr-ring-orange-500',
divideColor: 'tr-divide-orange-500',
outlineColor: 'tr-outline-orange-500',
@@ -937,6 +1007,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-600',
hoverBorderColor: 'hover:tr-border-orange-600',
ringRolor: 'tr-ring-orange-600',
+ ringColor: 'tr-ring-orange-600',
hoverRingColor: 'hover:tr-ring-orange-600',
divideColor: 'tr-divide-orange-600',
outlineColor: 'tr-outline-orange-600',
@@ -950,6 +1021,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-700',
hoverBorderColor: 'hover:tr-border-orange-700',
ringRolor: 'tr-ring-orange-700',
+ ringColor: 'tr-ring-orange-700',
hoverRingColor: 'hover:tr-ring-orange-700',
divideColor: 'tr-divide-orange-700',
outlineColor: 'tr-outline-orange-700',
@@ -963,6 +1035,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-800',
hoverBorderColor: 'hover:tr-border-orange-800',
ringRolor: 'tr-ring-orange-800',
+ ringColor: 'tr-ring-orange-800',
hoverRingColor: 'hover:tr-ring-orange-800',
divideColor: 'tr-divide-orange-800',
outlineColor: 'tr-outline-orange-800',
@@ -976,6 +1049,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-orange-900',
hoverBorderColor: 'hover:tr-border-orange-900',
ringRolor: 'tr-ring-orange-900',
+ ringColor: 'tr-ring-orange-900',
hoverRingColor: 'hover:tr-ring-orange-900',
divideColor: 'tr-divide-orange-900',
outlineColor: 'tr-outline-orange-900',
@@ -991,6 +1065,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-50',
hoverBorderColor: 'hover:tr-border-amber-50',
ringRolor: 'tr-ring-amber-50',
+ ringColor: 'tr-ring-amber-50',
hoverRingColor: 'hover:tr-ring-amber-50',
divideColor: 'tr-divide-amber-50',
outlineColor: 'tr-outline-amber-50',
@@ -1004,6 +1079,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-100',
hoverBorderColor: 'hover:tr-border-amber-100',
ringRolor: 'tr-ring-amber-100',
+ ringColor: 'tr-ring-amber-100',
hoverRingColor: 'hover:tr-ring-amber-100',
divideColor: 'tr-divide-amber-100',
outlineColor: 'tr-outline-amber-100',
@@ -1017,6 +1093,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-200',
hoverBorderColor: 'hover:tr-border-amber-200',
ringRolor: 'tr-ring-amber-200',
+ ringColor: 'tr-ring-amber-200',
hoverRingColor: 'hover:tr-ring-amber-200',
divideColor: 'tr-divide-amber-200',
outlineColor: 'tr-outline-amber-200',
@@ -1030,6 +1107,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-300',
hoverBorderColor: 'hover:tr-border-amber-300',
ringRolor: 'tr-ring-amber-300',
+ ringColor: 'tr-ring-amber-300',
hoverRingColor: 'hover:tr-ring-amber-300',
divideColor: 'tr-divide-amber-300',
outlineColor: 'tr-outline-amber-300',
@@ -1043,6 +1121,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-400',
hoverBorderColor: 'hover:tr-border-amber-400',
ringRolor: 'tr-ring-amber-400',
+ ringColor: 'tr-ring-amber-400',
hoverRingColor: 'hover:tr-ring-amber-400',
divideColor: 'tr-divide-amber-400',
outlineColor: 'tr-outline-amber-400',
@@ -1056,6 +1135,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-500',
hoverBorderColor: 'hover:tr-border-amber-500',
ringRolor: 'tr-ring-amber-500',
+ ringColor: 'tr-ring-amber-500',
hoverRingColor: 'hover:tr-ring-amber-500',
divideColor: 'tr-divide-amber-500',
outlineColor: 'tr-outline-amber-500',
@@ -1069,6 +1149,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-600',
hoverBorderColor: 'hover:tr-border-amber-600',
ringRolor: 'tr-ring-amber-600',
+ ringColor: 'tr-ring-amber-600',
hoverRingColor: 'hover:tr-ring-amber-600',
divideColor: 'tr-divide-amber-600',
outlineColor: 'tr-outline-amber-600',
@@ -1082,6 +1163,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-700',
hoverBorderColor: 'hover:tr-border-amber-700',
ringRolor: 'tr-ring-amber-700',
+ ringColor: 'tr-ring-amber-700',
hoverRingColor: 'hover:tr-ring-amber-700',
divideColor: 'tr-divide-amber-700',
outlineColor: 'tr-outline-amber-700',
@@ -1095,6 +1177,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-800',
hoverBorderColor: 'hover:tr-border-amber-800',
ringRolor: 'tr-ring-amber-800',
+ ringColor: 'tr-ring-amber-800',
hoverRingColor: 'hover:tr-ring-amber-800',
divideColor: 'tr-divide-amber-800',
outlineColor: 'tr-outline-amber-800',
@@ -1108,6 +1191,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-amber-900',
hoverBorderColor: 'hover:tr-border-amber-900',
ringRolor: 'tr-ring-amber-900',
+ ringColor: 'tr-ring-amber-900',
hoverRingColor: 'hover:tr-ring-amber-900',
divideColor: 'tr-divide-amber-900',
outlineColor: 'tr-outline-amber-900',
@@ -1123,6 +1207,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-50',
hoverBorderColor: 'hover:tr-border-yellow-50',
ringRolor: 'tr-ring-yellow-50',
+ ringColor: 'tr-ring-yellow-50',
hoverRingColor: 'hover:tr-ring-yellow-50',
divideColor: 'tr-divide-yellow-50',
outlineColor: 'tr-outline-yellow-50',
@@ -1136,6 +1221,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-100',
hoverBorderColor: 'hover:tr-border-yellow-100',
ringRolor: 'tr-ring-yellow-100',
+ ringColor: 'tr-ring-yellow-100',
hoverRingColor: 'hover:tr-ring-yellow-100',
divideColor: 'tr-divide-yellow-100',
outlineColor: 'tr-outline-yellow-100',
@@ -1149,6 +1235,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-200',
hoverBorderColor: 'hover:tr-border-yellow-200',
ringRolor: 'tr-ring-yellow-200',
+ ringColor: 'tr-ring-yellow-200',
hoverRingColor: 'hover:tr-ring-yellow-200',
divideColor: 'tr-divide-yellow-200',
outlineColor: 'tr-outline-yellow-200',
@@ -1162,6 +1249,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-300',
hoverBorderColor: 'hover:tr-border-yellow-300',
ringRolor: 'tr-ring-yellow-300',
+ ringColor: 'tr-ring-yellow-300',
hoverRingColor: 'hover:tr-ring-yellow-300',
divideColor: 'tr-divide-yellow-300',
outlineColor: 'tr-outline-yellow-300',
@@ -1175,6 +1263,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-400',
hoverBorderColor: 'hover:tr-border-yellow-400',
ringRolor: 'tr-ring-yellow-400',
+ ringColor: 'tr-ring-yellow-400',
hoverRingColor: 'hover:tr-ring-yellow-400',
divideColor: 'tr-divide-yellow-400',
outlineColor: 'tr-outline-yellow-400',
@@ -1188,6 +1277,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-500',
hoverBorderColor: 'hover:tr-border-yellow-500',
ringRolor: 'tr-ring-yellow-500',
+ ringColor: 'tr-ring-yellow-500',
hoverRingColor: 'hover:tr-ring-yellow-500',
divideColor: 'tr-divide-yellow-500',
outlineColor: 'tr-outline-yellow-500',
@@ -1201,6 +1291,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-600',
hoverBorderColor: 'hover:tr-border-yellow-600',
ringRolor: 'tr-ring-yellow-600',
+ ringColor: 'tr-ring-yellow-600',
hoverRingColor: 'hover:tr-ring-yellow-600',
divideColor: 'tr-divide-yellow-600',
outlineColor: 'tr-outline-yellow-600',
@@ -1214,6 +1305,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-700',
hoverBorderColor: 'hover:tr-border-yellow-700',
ringRolor: 'tr-ring-yellow-700',
+ ringColor: 'tr-ring-yellow-700',
hoverRingColor: 'hover:tr-ring-yellow-700',
divideColor: 'tr-divide-yellow-700',
outlineColor: 'tr-outline-yellow-700',
@@ -1227,6 +1319,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-800',
hoverBorderColor: 'hover:tr-border-yellow-800',
ringRolor: 'tr-ring-yellow-800',
+ ringColor: 'tr-ring-yellow-800',
hoverRingColor: 'hover:tr-ring-yellow-800',
divideColor: 'tr-divide-yellow-800',
outlineColor: 'tr-outline-yellow-800',
@@ -1240,6 +1333,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-yellow-900',
hoverBorderColor: 'hover:tr-border-yellow-900',
ringRolor: 'tr-ring-yellow-900',
+ ringColor: 'tr-ring-yellow-900',
hoverRingColor: 'hover:tr-ring-yellow-900',
divideColor: 'tr-divide-yellow-900',
outlineColor: 'tr-outline-yellow-900',
@@ -1255,6 +1349,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-50',
hoverBorderColor: 'hover:tr-border-lime-50',
ringRolor: 'tr-ring-lime-50',
+ ringColor: 'tr-ring-lime-50',
hoverRingColor: 'hover:tr-ring-lime-50',
divideColor: 'tr-divide-lime-50',
outlineColor: 'tr-outline-lime-50',
@@ -1268,6 +1363,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-100',
hoverBorderColor: 'hover:tr-border-lime-100',
ringRolor: 'tr-ring-lime-100',
+ ringColor: 'tr-ring-lime-100',
hoverRingColor: 'hover:tr-ring-lime-100',
divideColor: 'tr-divide-lime-100',
outlineColor: 'tr-outline-lime-100',
@@ -1281,6 +1377,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-200',
hoverBorderColor: 'hover:tr-border-lime-200',
ringRolor: 'tr-ring-lime-200',
+ ringColor: 'tr-ring-lime-200',
hoverRingColor: 'hover:tr-ring-lime-200',
divideColor: 'tr-divide-lime-200',
outlineColor: 'tr-outline-lime-200',
@@ -1294,6 +1391,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-300',
hoverBorderColor: 'hover:tr-border-lime-300',
ringRolor: 'tr-ring-lime-300',
+ ringColor: 'tr-ring-lime-300',
hoverRingColor: 'hover:tr-ring-lime-300',
divideColor: 'tr-divide-lime-300',
outlineColor: 'tr-outline-lime-300',
@@ -1307,6 +1405,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-400',
hoverBorderColor: 'hover:tr-border-lime-400',
ringRolor: 'tr-ring-lime-400',
+ ringColor: 'tr-ring-lime-400',
hoverRingColor: 'hover:tr-ring-lime-400',
divideColor: 'tr-divide-lime-400',
outlineColor: 'tr-outline-lime-400',
@@ -1320,6 +1419,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-500',
hoverBorderColor: 'hover:tr-border-lime-500',
ringRolor: 'tr-ring-lime-500',
+ ringColor: 'tr-ring-lime-500',
hoverRingColor: 'hover:tr-ring-lime-500',
divideColor: 'tr-divide-lime-500',
outlineColor: 'tr-outline-lime-500',
@@ -1333,6 +1433,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-600',
hoverBorderColor: 'hover:tr-border-lime-600',
ringRolor: 'tr-ring-lime-600',
+ ringColor: 'tr-ring-lime-600',
hoverRingColor: 'hover:tr-ring-lime-600',
divideColor: 'tr-divide-lime-600',
outlineColor: 'tr-outline-lime-600',
@@ -1346,6 +1447,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-700',
hoverBorderColor: 'hover:tr-border-lime-700',
ringRolor: 'tr-ring-lime-700',
+ ringColor: 'tr-ring-lime-700',
hoverRingColor: 'hover:tr-ring-lime-700',
divideColor: 'tr-divide-lime-700',
outlineColor: 'tr-outline-lime-700',
@@ -1359,6 +1461,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-800',
hoverBorderColor: 'hover:tr-border-lime-800',
ringRolor: 'tr-ring-lime-800',
+ ringColor: 'tr-ring-lime-800',
hoverRingColor: 'hover:tr-ring-lime-800',
divideColor: 'tr-divide-lime-800',
outlineColor: 'tr-outline-lime-800',
@@ -1372,6 +1475,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-lime-900',
hoverBorderColor: 'hover:tr-border-lime-900',
ringRolor: 'tr-ring-lime-900',
+ ringColor: 'tr-ring-lime-900',
hoverRingColor: 'hover:tr-ring-lime-900',
divideColor: 'tr-divide-lime-900',
outlineColor: 'tr-outline-lime-900',
@@ -1387,6 +1491,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-50',
hoverBorderColor: 'hover:tr-border-green-50',
ringRolor: 'tr-ring-green-50',
+ ringColor: 'tr-ring-green-50',
hoverRingColor: 'hover:tr-ring-green-50',
divideColor: 'tr-divide-green-50',
outlineColor: 'tr-outline-green-50',
@@ -1400,6 +1505,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-100',
hoverBorderColor: 'hover:tr-border-green-100',
ringRolor: 'tr-ring-green-100',
+ ringColor: 'tr-ring-green-100',
hoverRingColor: 'hover:tr-ring-green-100',
divideColor: 'tr-divide-green-100',
outlineColor: 'tr-outline-green-100',
@@ -1413,6 +1519,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-200',
hoverBorderColor: 'hover:tr-border-green-200',
ringRolor: 'tr-ring-green-200',
+ ringColor: 'tr-ring-green-200',
hoverRingColor: 'hover:tr-ring-green-200',
divideColor: 'tr-divide-green-200',
outlineColor: 'tr-outline-green-200',
@@ -1426,6 +1533,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-300',
hoverBorderColor: 'hover:tr-border-green-300',
ringRolor: 'tr-ring-green-300',
+ ringColor: 'tr-ring-green-300',
hoverRingColor: 'hover:tr-ring-green-300',
divideColor: 'tr-divide-green-300',
outlineColor: 'tr-outline-green-300',
@@ -1439,6 +1547,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-400',
hoverBorderColor: 'hover:tr-border-green-400',
ringRolor: 'tr-ring-green-400',
+ ringColor: 'tr-ring-green-400',
hoverRingColor: 'hover:tr-ring-green-400',
divideColor: 'tr-divide-green-400',
outlineColor: 'tr-outline-green-400',
@@ -1452,6 +1561,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-500',
hoverBorderColor: 'hover:tr-border-green-500',
ringRolor: 'tr-ring-green-500',
+ ringColor: 'tr-ring-green-500',
hoverRingColor: 'hover:tr-ring-green-500',
divideColor: 'tr-divide-green-500',
outlineColor: 'tr-outline-green-500',
@@ -1465,6 +1575,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-600',
hoverBorderColor: 'hover:tr-border-green-600',
ringRolor: 'tr-ring-green-600',
+ ringColor: 'tr-ring-green-600',
hoverRingColor: 'hover:tr-ring-green-600',
divideColor: 'tr-divide-green-600',
outlineColor: 'tr-outline-green-600',
@@ -1478,6 +1589,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-700',
hoverBorderColor: 'hover:tr-border-green-700',
ringRolor: 'tr-ring-green-700',
+ ringColor: 'tr-ring-green-700',
hoverRingColor: 'hover:tr-ring-green-700',
divideColor: 'tr-divide-green-700',
outlineColor: 'tr-outline-green-700',
@@ -1491,6 +1603,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-800',
hoverBorderColor: 'hover:tr-border-green-800',
ringRolor: 'tr-ring-green-800',
+ ringColor: 'tr-ring-green-800',
hoverRingColor: 'hover:tr-ring-green-800',
divideColor: 'tr-divide-green-800',
outlineColor: 'tr-outline-green-800',
@@ -1504,6 +1617,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-green-900',
hoverBorderColor: 'hover:tr-border-green-900',
ringRolor: 'tr-ring-green-900',
+ ringColor: 'tr-ring-green-900',
hoverRingColor: 'hover:tr-ring-green-900',
divideColor: 'tr-divide-green-900',
outlineColor: 'tr-outline-green-900',
@@ -1519,6 +1633,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-50',
hoverBorderColor: 'hover:tr-border-emerald-50',
ringRolor: 'tr-ring-emerald-50',
+ ringColor: 'tr-ring-emerald-50',
hoverRingColor: 'hover:tr-ring-emerald-50',
divideColor: 'tr-divide-emerald-50',
outlineColor: 'tr-outline-emerald-50',
@@ -1532,6 +1647,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-100',
hoverBorderColor: 'hover:tr-border-emerald-100',
ringRolor: 'tr-ring-emerald-100',
+ ringColor: 'tr-ring-emerald-100',
hoverRingColor: 'hover:tr-ring-emerald-100',
divideColor: 'tr-divide-emerald-100',
outlineColor: 'tr-outline-emerald-100',
@@ -1545,6 +1661,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-200',
hoverBorderColor: 'hover:tr-border-emerald-200',
ringRolor: 'tr-ring-emerald-200',
+ ringColor: 'tr-ring-emerald-200',
hoverRingColor: 'hover:tr-ring-emerald-200',
divideColor: 'tr-divide-emerald-200',
outlineColor: 'tr-outline-emerald-200',
@@ -1558,6 +1675,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-300',
hoverBorderColor: 'hover:tr-border-emerald-300',
ringRolor: 'tr-ring-emerald-300',
+ ringColor: 'tr-ring-emerald-300',
hoverRingColor: 'hover:tr-ring-emerald-300',
divideColor: 'tr-divide-emerald-300',
outlineColor: 'tr-outline-emerald-300',
@@ -1571,6 +1689,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-400',
hoverBorderColor: 'hover:tr-border-emerald-400',
ringRolor: 'tr-ring-emerald-400',
+ ringColor: 'tr-ring-emerald-400',
hoverRingColor: 'hover:tr-ring-emerald-400',
divideColor: 'tr-divide-emerald-400',
outlineColor: 'tr-outline-emerald-400',
@@ -1584,6 +1703,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-500',
hoverBorderColor: 'hover:tr-border-emerald-500',
ringRolor: 'tr-ring-emerald-500',
+ ringColor: 'tr-ring-emerald-500',
hoverRingColor: 'hover:tr-ring-emerald-500',
divideColor: 'tr-divide-emerald-500',
outlineColor: 'tr-outline-emerald-500',
@@ -1597,6 +1717,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-600',
hoverBorderColor: 'hover:tr-border-emerald-600',
ringRolor: 'tr-ring-emerald-600',
+ ringColor: 'tr-ring-emerald-600',
hoverRingColor: 'hover:tr-ring-emerald-600',
divideColor: 'tr-divide-emerald-600',
outlineColor: 'tr-outline-emerald-600',
@@ -1610,6 +1731,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-700',
hoverBorderColor: 'hover:tr-border-emerald-700',
ringRolor: 'tr-ring-emerald-700',
+ ringColor: 'tr-ring-emerald-700',
hoverRingColor: 'hover:tr-ring-emerald-700',
divideColor: 'tr-divide-emerald-700',
outlineColor: 'tr-outline-emerald-700',
@@ -1623,6 +1745,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-800',
hoverBorderColor: 'hover:tr-border-emerald-800',
ringRolor: 'tr-ring-emerald-800',
+ ringColor: 'tr-ring-emerald-800',
hoverRingColor: 'hover:tr-ring-emerald-800',
divideColor: 'tr-divide-emerald-800',
outlineColor: 'tr-outline-emerald-800',
@@ -1636,6 +1759,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-emerald-900',
hoverBorderColor: 'hover:tr-border-emerald-900',
ringRolor: 'tr-ring-emerald-900',
+ ringColor: 'tr-ring-emerald-900',
hoverRingColor: 'hover:tr-ring-emerald-900',
divideColor: 'tr-divide-emerald-900',
outlineColor: 'tr-outline-emerald-900',
@@ -1651,6 +1775,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-50',
hoverBorderColor: 'hover:tr-border-teal-50',
ringRolor: 'tr-ring-teal-50',
+ ringColor: 'tr-ring-teal-50',
hoverRingColor: 'hover:tr-ring-teal-50',
divideColor: 'tr-divide-teal-50',
outlineColor: 'tr-outline-teal-50',
@@ -1664,6 +1789,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-100',
hoverBorderColor: 'hover:tr-border-teal-100',
ringRolor: 'tr-ring-teal-100',
+ ringColor: 'tr-ring-teal-100',
hoverRingColor: 'hover:tr-ring-teal-100',
divideColor: 'tr-divide-teal-100',
outlineColor: 'tr-outline-teal-100',
@@ -1677,6 +1803,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-200',
hoverBorderColor: 'hover:tr-border-teal-200',
ringRolor: 'tr-ring-teal-200',
+ ringColor: 'tr-ring-teal-200',
hoverRingColor: 'hover:tr-ring-teal-200',
divideColor: 'tr-divide-teal-200',
outlineColor: 'tr-outline-teal-200',
@@ -1690,6 +1817,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-300',
hoverBorderColor: 'hover:tr-border-teal-300',
ringRolor: 'tr-ring-teal-300',
+ ringColor: 'tr-ring-teal-300',
hoverRingColor: 'hover:tr-ring-teal-300',
divideColor: 'tr-divide-teal-300',
outlineColor: 'tr-outline-teal-300',
@@ -1703,6 +1831,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-400',
hoverBorderColor: 'hover:tr-border-teal-400',
ringRolor: 'tr-ring-teal-400',
+ ringColor: 'tr-ring-teal-400',
hoverRingColor: 'hover:tr-ring-teal-400',
divideColor: 'tr-divide-teal-400',
outlineColor: 'tr-outline-teal-400',
@@ -1716,6 +1845,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-500',
hoverBorderColor: 'hover:tr-border-teal-500',
ringRolor: 'tr-ring-teal-500',
+ ringColor: 'tr-ring-teal-500',
hoverRingColor: 'hover:tr-ring-teal-500',
divideColor: 'tr-divide-teal-500',
outlineColor: 'tr-outline-teal-500',
@@ -1729,6 +1859,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-600',
hoverBorderColor: 'hover:tr-border-teal-600',
ringRolor: 'tr-ring-teal-600',
+ ringColor: 'tr-ring-teal-600',
hoverRingColor: 'hover:tr-ring-teal-600',
divideColor: 'tr-divide-teal-600',
outlineColor: 'tr-outline-teal-600',
@@ -1742,6 +1873,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-700',
hoverBorderColor: 'hover:tr-border-teal-700',
ringRolor: 'tr-ring-teal-700',
+ ringColor: 'tr-ring-teal-700',
hoverRingColor: 'hover:tr-ring-teal-700',
divideColor: 'tr-divide-teal-700',
outlineColor: 'tr-outline-teal-700',
@@ -1755,6 +1887,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-800',
hoverBorderColor: 'hover:tr-border-teal-800',
ringRolor: 'tr-ring-teal-800',
+ ringColor: 'tr-ring-teal-800',
hoverRingColor: 'hover:tr-ring-teal-800',
divideColor: 'tr-divide-teal-800',
outlineColor: 'tr-outline-teal-800',
@@ -1768,6 +1901,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-teal-900',
hoverBorderColor: 'hover:tr-border-teal-900',
ringRolor: 'tr-ring-teal-900',
+ ringColor: 'tr-ring-teal-900',
hoverRingColor: 'hover:tr-ring-teal-900',
divideColor: 'tr-divide-teal-900',
outlineColor: 'tr-outline-teal-900',
@@ -1783,6 +1917,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-50',
hoverBorderColor: 'hover:tr-border-cyan-50',
ringRolor: 'tr-ring-cyan-50',
+ ringColor: 'tr-ring-cyan-50',
hoverRingColor: 'hover:tr-ring-cyan-50',
divideColor: 'tr-divide-cyan-50',
outlineColor: 'tr-outline-cyan-50',
@@ -1796,6 +1931,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-100',
hoverBorderColor: 'hover:tr-border-cyan-100',
ringRolor: 'tr-ring-cyan-100',
+ ringColor: 'tr-ring-cyan-100',
hoverRingColor: 'hover:tr-ring-cyan-100',
divideColor: 'tr-divide-cyan-100',
outlineColor: 'tr-outline-cyan-100',
@@ -1809,6 +1945,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-200',
hoverBorderColor: 'hover:tr-border-cyan-200',
ringRolor: 'tr-ring-cyan-200',
+ ringColor: 'tr-ring-cyan-200',
hoverRingColor: 'hover:tr-ring-cyan-200',
divideColor: 'tr-divide-cyan-200',
outlineColor: 'tr-outline-cyan-200',
@@ -1822,6 +1959,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-300',
hoverBorderColor: 'hover:tr-border-cyan-300',
ringRolor: 'tr-ring-cyan-300',
+ ringColor: 'tr-ring-cyan-300',
hoverRingColor: 'hover:tr-ring-cyan-300',
divideColor: 'tr-divide-cyan-300',
outlineColor: 'tr-outline-cyan-300',
@@ -1835,6 +1973,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-400',
hoverBorderColor: 'hover:tr-border-cyan-400',
ringRolor: 'tr-ring-cyan-400',
+ ringColor: 'tr-ring-cyan-400',
hoverRingColor: 'hover:tr-ring-cyan-400',
divideColor: 'tr-divide-cyan-400',
outlineColor: 'tr-outline-cyan-400',
@@ -1848,6 +1987,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-500',
hoverBorderColor: 'hover:tr-border-cyan-500',
ringRolor: 'tr-ring-cyan-500',
+ ringColor: 'tr-ring-cyan-500',
hoverRingColor: 'hover:tr-ring-cyan-500',
divideColor: 'tr-divide-cyan-500',
outlineColor: 'tr-outline-cyan-500',
@@ -1861,6 +2001,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-600',
hoverBorderColor: 'hover:tr-border-cyan-600',
ringRolor: 'tr-ring-cyan-600',
+ ringColor: 'tr-ring-cyan-600',
hoverRingColor: 'hover:tr-ring-cyan-600',
divideColor: 'tr-divide-cyan-600',
outlineColor: 'tr-outline-cyan-600',
@@ -1874,6 +2015,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-700',
hoverBorderColor: 'hover:tr-border-cyan-700',
ringRolor: 'tr-ring-cyan-700',
+ ringColor: 'tr-ring-cyan-700',
hoverRingColor: 'hover:tr-ring-cyan-700',
divideColor: 'tr-divide-cyan-700',
outlineColor: 'tr-outline-cyan-700',
@@ -1887,6 +2029,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-800',
hoverBorderColor: 'hover:tr-border-cyan-800',
ringRolor: 'tr-ring-cyan-800',
+ ringColor: 'tr-ring-cyan-800',
hoverRingColor: 'hover:tr-ring-cyan-800',
divideColor: 'tr-divide-cyan-800',
outlineColor: 'tr-outline-cyan-800',
@@ -1900,6 +2043,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-cyan-900',
hoverBorderColor: 'hover:tr-border-cyan-900',
ringRolor: 'tr-ring-cyan-900',
+ ringColor: 'tr-ring-cyan-900',
hoverRingColor: 'hover:tr-ring-cyan-900',
divideColor: 'tr-divide-cyan-900',
outlineColor: 'tr-outline-cyan-900',
@@ -1915,6 +2059,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-50',
hoverBorderColor: 'hover:tr-border-sky-50',
ringRolor: 'tr-ring-sky-50',
+ ringColor: 'tr-ring-sky-50',
hoverRingColor: 'hover:tr-ring-sky-50',
divideColor: 'tr-divide-sky-50',
outlineColor: 'tr-outline-sky-50',
@@ -1928,6 +2073,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-100',
hoverBorderColor: 'hover:tr-border-sky-100',
ringRolor: 'tr-ring-sky-100',
+ ringColor: 'tr-ring-sky-100',
hoverRingColor: 'hover:tr-ring-sky-100',
divideColor: 'tr-divide-sky-100',
outlineColor: 'tr-outline-sky-100',
@@ -1941,6 +2087,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-200',
hoverBorderColor: 'hover:tr-border-sky-200',
ringRolor: 'tr-ring-sky-200',
+ ringColor: 'tr-ring-sky-200',
hoverRingColor: 'hover:tr-ring-sky-200',
divideColor: 'tr-divide-sky-200',
outlineColor: 'tr-outline-sky-200',
@@ -1954,6 +2101,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-300',
hoverBorderColor: 'hover:tr-border-sky-300',
ringRolor: 'tr-ring-sky-300',
+ ringColor: 'tr-ring-sky-300',
hoverRingColor: 'hover:tr-ring-sky-300',
divideColor: 'tr-divide-sky-300',
outlineColor: 'tr-outline-sky-300',
@@ -1967,6 +2115,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-400',
hoverBorderColor: 'hover:tr-border-sky-400',
ringRolor: 'tr-ring-sky-400',
+ ringColor: 'tr-ring-sky-400',
hoverRingColor: 'hover:tr-ring-sky-400',
divideColor: 'tr-divide-sky-400',
outlineColor: 'tr-outline-sky-400',
@@ -1980,6 +2129,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-500',
hoverBorderColor: 'hover:tr-border-sky-500',
ringRolor: 'tr-ring-sky-500',
+ ringColor: 'tr-ring-sky-500',
hoverRingColor: 'hover:tr-ring-sky-500',
divideColor: 'tr-divide-sky-500',
outlineColor: 'tr-outline-sky-500',
@@ -1993,6 +2143,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-600',
hoverBorderColor: 'hover:tr-border-sky-600',
ringRolor: 'tr-ring-sky-600',
+ ringColor: 'tr-ring-sky-600',
hoverRingColor: 'hover:tr-ring-sky-600',
divideColor: 'tr-divide-sky-600',
outlineColor: 'tr-outline-sky-600',
@@ -2006,6 +2157,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-700',
hoverBorderColor: 'hover:tr-border-sky-700',
ringRolor: 'tr-ring-sky-700',
+ ringColor: 'tr-ring-sky-700',
hoverRingColor: 'hover:tr-ring-sky-700',
divideColor: 'tr-divide-sky-700',
outlineColor: 'tr-outline-sky-700',
@@ -2019,6 +2171,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-800',
hoverBorderColor: 'hover:tr-border-sky-800',
ringRolor: 'tr-ring-sky-800',
+ ringColor: 'tr-ring-sky-800',
hoverRingColor: 'hover:tr-ring-sky-800',
divideColor: 'tr-divide-sky-800',
outlineColor: 'tr-outline-sky-800',
@@ -2032,6 +2185,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-sky-900',
hoverBorderColor: 'hover:tr-border-sky-900',
ringRolor: 'tr-ring-sky-900',
+ ringColor: 'tr-ring-sky-900',
hoverRingColor: 'hover:tr-ring-sky-900',
divideColor: 'tr-divide-sky-900',
outlineColor: 'tr-outline-sky-900',
@@ -2047,6 +2201,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-50',
hoverBorderColor: 'hover:tr-border-blue-50',
ringRolor: 'tr-ring-blue-50',
+ ringColor: 'tr-ring-blue-50',
hoverRingColor: 'hover:tr-ring-blue-50',
divideColor: 'tr-divide-blue-50',
outlineColor: 'tr-outline-blue-50',
@@ -2060,6 +2215,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-100',
hoverBorderColor: 'hover:tr-border-blue-100',
ringRolor: 'tr-ring-blue-100',
+ ringColor: 'tr-ring-blue-100',
hoverRingColor: 'hover:tr-ring-blue-100',
divideColor: 'tr-divide-blue-100',
outlineColor: 'tr-outline-blue-100',
@@ -2073,6 +2229,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-200',
hoverBorderColor: 'hover:tr-border-blue-200',
ringRolor: 'tr-ring-blue-200',
+ ringColor: 'tr-ring-blue-200',
hoverRingColor: 'hover:tr-ring-blue-200',
divideColor: 'tr-divide-blue-200',
outlineColor: 'tr-outline-blue-200',
@@ -2086,6 +2243,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-300',
hoverBorderColor: 'hover:tr-border-blue-300',
ringRolor: 'tr-ring-blue-300',
+ ringColor: 'tr-ring-blue-300',
hoverRingColor: 'hover:tr-ring-blue-300',
divideColor: 'tr-divide-blue-300',
outlineColor: 'tr-outline-blue-300',
@@ -2099,6 +2257,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-400',
hoverBorderColor: 'hover:tr-border-blue-400',
ringRolor: 'tr-ring-blue-400',
+ ringColor: 'tr-ring-blue-400',
hoverRingColor: 'hover:tr-ring-blue-400',
divideColor: 'tr-divide-blue-400',
outlineColor: 'tr-outline-blue-400',
@@ -2112,6 +2271,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-500',
hoverBorderColor: 'hover:tr-border-blue-500',
ringRolor: 'tr-ring-blue-500',
+ ringColor: 'tr-ring-blue-500',
hoverRingColor: 'hover:tr-ring-blue-500',
divideColor: 'tr-divide-blue-500',
outlineColor: 'tr-outline-blue-500',
@@ -2125,6 +2285,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-600',
hoverBorderColor: 'hover:tr-border-blue-600',
ringRolor: 'tr-ring-blue-600',
+ ringColor: 'tr-ring-blue-600',
hoverRingColor: 'hover:tr-ring-blue-600',
divideColor: 'tr-divide-blue-600',
outlineColor: 'tr-outline-blue-600',
@@ -2138,6 +2299,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-700',
hoverBorderColor: 'hover:tr-border-blue-700',
ringRolor: 'tr-ring-blue-700',
+ ringColor: 'tr-ring-blue-700',
hoverRingColor: 'hover:tr-ring-blue-700',
divideColor: 'tr-divide-blue-700',
outlineColor: 'tr-outline-blue-700',
@@ -2151,6 +2313,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-800',
hoverBorderColor: 'hover:tr-border-blue-800',
ringRolor: 'tr-ring-blue-800',
+ ringColor: 'tr-ring-blue-800',
hoverRingColor: 'hover:tr-ring-blue-800',
divideColor: 'tr-divide-blue-800',
outlineColor: 'tr-outline-blue-800',
@@ -2164,6 +2327,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-blue-900',
hoverBorderColor: 'hover:tr-border-blue-900',
ringRolor: 'tr-ring-blue-900',
+ ringColor: 'tr-ring-blue-900',
hoverRingColor: 'hover:tr-ring-blue-900',
divideColor: 'tr-divide-blue-900',
outlineColor: 'tr-outline-blue-900',
@@ -2179,6 +2343,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-50',
hoverBorderColor: 'hover:tr-border-indigo-50',
ringRolor: 'tr-ring-indigo-50',
+ ringColor: 'tr-ring-indigo-50',
hoverRingColor: 'hover:tr-ring-indigo-50',
divideColor: 'tr-divide-indigo-50',
outlineColor: 'tr-outline-indigo-50',
@@ -2192,6 +2357,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-100',
hoverBorderColor: 'hover:tr-border-indigo-100',
ringRolor: 'tr-ring-indigo-100',
+ ringColor: 'tr-ring-indigo-100',
hoverRingColor: 'hover:tr-ring-indigo-100',
divideColor: 'tr-divide-indigo-100',
outlineColor: 'tr-outline-indigo-100',
@@ -2205,6 +2371,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-200',
hoverBorderColor: 'hover:tr-border-indigo-200',
ringRolor: 'tr-ring-indigo-200',
+ ringColor: 'tr-ring-indigo-200',
hoverRingColor: 'hover:tr-ring-indigo-200',
divideColor: 'tr-divide-indigo-200',
outlineColor: 'tr-outline-indigo-200',
@@ -2218,6 +2385,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-300',
hoverBorderColor: 'hover:tr-border-indigo-300',
ringRolor: 'tr-ring-indigo-300',
+ ringColor: 'tr-ring-indigo-300',
hoverRingColor: 'hover:tr-ring-indigo-300',
divideColor: 'tr-divide-indigo-300',
outlineColor: 'tr-outline-indigo-300',
@@ -2231,6 +2399,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-400',
hoverBorderColor: 'hover:tr-border-indigo-400',
ringRolor: 'tr-ring-indigo-400',
+ ringColor: 'tr-ring-indigo-400',
hoverRingColor: 'hover:tr-ring-indigo-400',
divideColor: 'tr-divide-indigo-400',
outlineColor: 'tr-outline-indigo-400',
@@ -2244,6 +2413,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-500',
hoverBorderColor: 'hover:tr-border-indigo-500',
ringRolor: 'tr-ring-indigo-500',
+ ringColor: 'tr-ring-indigo-500',
hoverRingColor: 'hover:tr-ring-indigo-500',
divideColor: 'tr-divide-indigo-500',
outlineColor: 'tr-outline-indigo-500',
@@ -2257,6 +2427,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-600',
hoverBorderColor: 'hover:tr-border-indigo-600',
ringRolor: 'tr-ring-indigo-600',
+ ringColor: 'tr-ring-indigo-600',
hoverRingColor: 'hover:tr-ring-indigo-600',
divideColor: 'tr-divide-indigo-600',
outlineColor: 'tr-outline-indigo-600',
@@ -2270,6 +2441,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-700',
hoverBorderColor: 'hover:tr-border-indigo-700',
ringRolor: 'tr-ring-indigo-700',
+ ringColor: 'tr-ring-indigo-700',
hoverRingColor: 'hover:tr-ring-indigo-700',
divideColor: 'tr-divide-indigo-700',
outlineColor: 'tr-outline-indigo-700',
@@ -2283,6 +2455,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-800',
hoverBorderColor: 'hover:tr-border-indigo-800',
ringRolor: 'tr-ring-indigo-800',
+ ringColor: 'tr-ring-indigo-800',
hoverRingColor: 'hover:tr-ring-indigo-800',
divideColor: 'tr-divide-indigo-800',
outlineColor: 'tr-outline-indigo-800',
@@ -2296,6 +2469,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-indigo-900',
hoverBorderColor: 'hover:tr-border-indigo-900',
ringRolor: 'tr-ring-indigo-900',
+ ringColor: 'tr-ring-indigo-900',
hoverRingColor: 'hover:tr-ring-indigo-900',
divideColor: 'tr-divide-indigo-900',
outlineColor: 'tr-outline-indigo-900',
@@ -2311,6 +2485,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-50',
hoverBorderColor: 'hover:tr-border-violet-50',
ringRolor: 'tr-ring-violet-50',
+ ringColor: 'tr-ring-violet-50',
hoverRingColor: 'hover:tr-ring-violet-50',
divideColor: 'tr-divide-violet-50',
outlineColor: 'tr-outline-violet-50',
@@ -2324,6 +2499,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-100',
hoverBorderColor: 'hover:tr-border-violet-100',
ringRolor: 'tr-ring-violet-100',
+ ringColor: 'tr-ring-violet-100',
hoverRingColor: 'hover:tr-ring-violet-100',
divideColor: 'tr-divide-violet-100',
outlineColor: 'tr-outline-violet-100',
@@ -2337,6 +2513,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-200',
hoverBorderColor: 'hover:tr-border-violet-200',
ringRolor: 'tr-ring-violet-200',
+ ringColor: 'tr-ring-violet-200',
hoverRingColor: 'hover:tr-ring-violet-200',
divideColor: 'tr-divide-violet-200',
outlineColor: 'tr-outline-violet-200',
@@ -2350,6 +2527,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-300',
hoverBorderColor: 'hover:tr-border-violet-300',
ringRolor: 'tr-ring-violet-300',
+ ringColor: 'tr-ring-violet-300',
hoverRingColor: 'hover:tr-ring-violet-300',
divideColor: 'tr-divide-violet-300',
outlineColor: 'tr-outline-violet-300',
@@ -2363,6 +2541,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-400',
hoverBorderColor: 'hover:tr-border-violet-400',
ringRolor: 'tr-ring-violet-400',
+ ringColor: 'tr-ring-violet-400',
hoverRingColor: 'hover:tr-ring-violet-400',
divideColor: 'tr-divide-violet-400',
outlineColor: 'tr-outline-violet-400',
@@ -2376,6 +2555,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-500',
hoverBorderColor: 'hover:tr-border-violet-500',
ringRolor: 'tr-ring-violet-500',
+ ringColor: 'tr-ring-violet-500',
hoverRingColor: 'hover:tr-ring-violet-500',
divideColor: 'tr-divide-violet-500',
outlineColor: 'tr-outline-violet-500',
@@ -2389,6 +2569,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-600',
hoverBorderColor: 'hover:tr-border-violet-600',
ringRolor: 'tr-ring-violet-600',
+ ringColor: 'tr-ring-violet-600',
hoverRingColor: 'hover:tr-ring-violet-600',
divideColor: 'tr-divide-violet-600',
outlineColor: 'tr-outline-violet-600',
@@ -2402,6 +2583,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-700',
hoverBorderColor: 'hover:tr-border-violet-700',
ringRolor: 'tr-ring-violet-700',
+ ringColor: 'tr-ring-violet-700',
hoverRingColor: 'hover:tr-ring-violet-700',
divideColor: 'tr-divide-violet-700',
outlineColor: 'tr-outline-violet-700',
@@ -2415,6 +2597,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-800',
hoverBorderColor: 'hover:tr-border-violet-800',
ringRolor: 'tr-ring-violet-800',
+ ringColor: 'tr-ring-violet-800',
hoverRingColor: 'hover:tr-ring-violet-800',
divideColor: 'tr-divide-violet-800',
outlineColor: 'tr-outline-violet-800',
@@ -2428,6 +2611,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-violet-900',
hoverBorderColor: 'hover:tr-border-violet-900',
ringRolor: 'tr-ring-violet-900',
+ ringColor: 'tr-ring-violet-900',
hoverRingColor: 'hover:tr-ring-violet-900',
divideColor: 'tr-divide-violet-900',
outlineColor: 'tr-outline-violet-900',
@@ -2443,6 +2627,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-50',
hoverBorderColor: 'hover:tr-border-purple-50',
ringRolor: 'tr-ring-purple-50',
+ ringColor: 'tr-ring-purple-50',
hoverRingColor: 'hover:tr-ring-purple-50',
divideColor: 'tr-divide-purple-50',
outlineColor: 'tr-outline-purple-50',
@@ -2456,6 +2641,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-100',
hoverBorderColor: 'hover:tr-border-purple-100',
ringRolor: 'tr-ring-purple-100',
+ ringColor: 'tr-ring-purple-100',
hoverRingColor: 'hover:tr-ring-purple-100',
divideColor: 'tr-divide-purple-100',
outlineColor: 'tr-outline-purple-100',
@@ -2469,6 +2655,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-200',
hoverBorderColor: 'hover:tr-border-purple-200',
ringRolor: 'tr-ring-purple-200',
+ ringColor: 'tr-ring-purple-200',
hoverRingColor: 'hover:tr-ring-purple-200',
divideColor: 'tr-divide-purple-200',
outlineColor: 'tr-outline-purple-200',
@@ -2482,6 +2669,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-300',
hoverBorderColor: 'hover:tr-border-purple-300',
ringRolor: 'tr-ring-purple-300',
+ ringColor: 'tr-ring-purple-300',
hoverRingColor: 'hover:tr-ring-purple-300',
divideColor: 'tr-divide-purple-300',
outlineColor: 'tr-outline-purple-300',
@@ -2495,6 +2683,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-400',
hoverBorderColor: 'hover:tr-border-purple-400',
ringRolor: 'tr-ring-purple-400',
+ ringColor: 'tr-ring-purple-400',
hoverRingColor: 'hover:tr-ring-purple-400',
divideColor: 'tr-divide-purple-400',
outlineColor: 'tr-outline-purple-400',
@@ -2508,6 +2697,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-500',
hoverBorderColor: 'hover:tr-border-purple-500',
ringRolor: 'tr-ring-purple-500',
+ ringColor: 'tr-ring-purple-500',
hoverRingColor: 'hover:tr-ring-purple-500',
divideColor: 'tr-divide-purple-500',
outlineColor: 'tr-outline-purple-500',
@@ -2521,6 +2711,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-600',
hoverBorderColor: 'hover:tr-border-purple-600',
ringRolor: 'tr-ring-purple-600',
+ ringColor: 'tr-ring-purple-600',
hoverRingColor: 'hover:tr-ring-purple-600',
divideColor: 'tr-divide-purple-600',
outlineColor: 'tr-outline-purple-600',
@@ -2534,6 +2725,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-700',
hoverBorderColor: 'hover:tr-border-purple-700',
ringRolor: 'tr-ring-purple-700',
+ ringColor: 'tr-ring-purple-700',
hoverRingColor: 'hover:tr-ring-purple-700',
divideColor: 'tr-divide-purple-700',
outlineColor: 'tr-outline-purple-700',
@@ -2547,6 +2739,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-800',
hoverBorderColor: 'hover:tr-border-purple-800',
ringRolor: 'tr-ring-purple-800',
+ ringColor: 'tr-ring-purple-800',
hoverRingColor: 'hover:tr-ring-purple-800',
divideColor: 'tr-divide-purple-800',
outlineColor: 'tr-outline-purple-800',
@@ -2560,6 +2753,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-purple-900',
hoverBorderColor: 'hover:tr-border-purple-900',
ringRolor: 'tr-ring-purple-900',
+ ringColor: 'tr-ring-purple-900',
hoverRingColor: 'hover:tr-ring-purple-900',
divideColor: 'tr-divide-purple-900',
outlineColor: 'tr-outline-purple-900',
@@ -2575,6 +2769,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-50',
hoverBorderColor: 'hover:tr-border-fuchsia-50',
ringRolor: 'tr-ring-fuchsia-50',
+ ringColor: 'tr-ring-fuchsia-50',
hoverRingColor: 'hover:tr-ring-fuchsia-50',
divideColor: 'tr-divide-fuchsia-50',
outlineColor: 'tr-outline-fuchsia-50',
@@ -2588,6 +2783,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-100',
hoverBorderColor: 'hover:tr-border-fuchsia-100',
ringRolor: 'tr-ring-fuchsia-100',
+ ringColor: 'tr-ring-fuchsia-100',
hoverRingColor: 'hover:tr-ring-fuchsia-100',
divideColor: 'tr-divide-fuchsia-100',
outlineColor: 'tr-outline-fuchsia-100',
@@ -2601,6 +2797,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-200',
hoverBorderColor: 'hover:tr-border-fuchsia-200',
ringRolor: 'tr-ring-fuchsia-200',
+ ringColor: 'tr-ring-fuchsia-200',
hoverRingColor: 'hover:tr-ring-fuchsia-200',
divideColor: 'tr-divide-fuchsia-200',
outlineColor: 'tr-outline-fuchsia-200',
@@ -2614,6 +2811,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-300',
hoverBorderColor: 'hover:tr-border-fuchsia-300',
ringRolor: 'tr-ring-fuchsia-300',
+ ringColor: 'tr-ring-fuchsia-300',
hoverRingColor: 'hover:tr-ring-fuchsia-300',
divideColor: 'tr-divide-fuchsia-300',
outlineColor: 'tr-outline-fuchsia-300',
@@ -2627,6 +2825,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-400',
hoverBorderColor: 'hover:tr-border-fuchsia-400',
ringRolor: 'tr-ring-fuchsia-400',
+ ringColor: 'tr-ring-fuchsia-400',
hoverRingColor: 'hover:tr-ring-fuchsia-400',
divideColor: 'tr-divide-fuchsia-400',
outlineColor: 'tr-outline-fuchsia-400',
@@ -2640,6 +2839,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-500',
hoverBorderColor: 'hover:tr-border-fuchsia-500',
ringRolor: 'tr-ring-fuchsia-500',
+ ringColor: 'tr-ring-fuchsia-500',
hoverRingColor: 'hover:tr-ring-fuchsia-500',
divideColor: 'tr-divide-fuchsia-500',
outlineColor: 'tr-outline-fuchsia-500',
@@ -2653,6 +2853,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-600',
hoverBorderColor: 'hover:tr-border-fuchsia-600',
ringRolor: 'tr-ring-fuchsia-600',
+ ringColor: 'tr-ring-fuchsia-600',
hoverRingColor: 'hover:tr-ring-fuchsia-600',
divideColor: 'tr-divide-fuchsia-600',
outlineColor: 'tr-outline-fuchsia-600',
@@ -2666,6 +2867,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-700',
hoverBorderColor: 'hover:tr-border-fuchsia-700',
ringRolor: 'tr-ring-fuchsia-700',
+ ringColor: 'tr-ring-fuchsia-700',
hoverRingColor: 'hover:tr-ring-fuchsia-700',
divideColor: 'tr-divide-fuchsia-700',
outlineColor: 'tr-outline-fuchsia-700',
@@ -2679,6 +2881,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-800',
hoverBorderColor: 'hover:tr-border-fuchsia-800',
ringRolor: 'tr-ring-fuchsia-800',
+ ringColor: 'tr-ring-fuchsia-800',
hoverRingColor: 'hover:tr-ring-fuchsia-800',
divideColor: 'tr-divide-fuchsia-800',
outlineColor: 'tr-outline-fuchsia-800',
@@ -2692,6 +2895,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-fuchsia-900',
hoverBorderColor: 'hover:tr-border-fuchsia-900',
ringRolor: 'tr-ring-fuchsia-900',
+ ringColor: 'tr-ring-fuchsia-900',
hoverRingColor: 'hover:tr-ring-fuchsia-900',
divideColor: 'tr-divide-fuchsia-900',
outlineColor: 'tr-outline-fuchsia-900',
@@ -2707,6 +2911,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-50',
hoverBorderColor: 'hover:tr-border-pink-50',
ringRolor: 'tr-ring-pink-50',
+ ringColor: 'tr-ring-pink-50',
hoverRingColor: 'hover:tr-ring-pink-50',
divideColor: 'tr-divide-pink-50',
outlineColor: 'tr-outline-pink-50',
@@ -2720,6 +2925,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-100',
hoverBorderColor: 'hover:tr-border-pink-100',
ringRolor: 'tr-ring-pink-100',
+ ringColor: 'tr-ring-pink-100',
hoverRingColor: 'hover:tr-ring-pink-100',
divideColor: 'tr-divide-pink-100',
outlineColor: 'tr-outline-pink-100',
@@ -2733,6 +2939,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-200',
hoverBorderColor: 'hover:tr-border-pink-200',
ringRolor: 'tr-ring-pink-200',
+ ringColor: 'tr-ring-pink-200',
hoverRingColor: 'hover:tr-ring-pink-200',
divideColor: 'tr-divide-pink-200',
outlineColor: 'tr-outline-pink-200',
@@ -2746,6 +2953,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-300',
hoverBorderColor: 'hover:tr-border-pink-300',
ringRolor: 'tr-ring-pink-300',
+ ringColor: 'tr-ring-pink-300',
hoverRingColor: 'hover:tr-ring-pink-300',
divideColor: 'tr-divide-pink-300',
outlineColor: 'tr-outline-pink-300',
@@ -2759,6 +2967,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-400',
hoverBorderColor: 'hover:tr-border-pink-400',
ringRolor: 'tr-ring-pink-400',
+ ringColor: 'tr-ring-pink-400',
hoverRingColor: 'hover:tr-ring-pink-400',
divideColor: 'tr-divide-pink-400',
outlineColor: 'tr-outline-pink-400',
@@ -2772,6 +2981,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-500',
hoverBorderColor: 'hover:tr-border-pink-500',
ringRolor: 'tr-ring-pink-500',
+ ringColor: 'tr-ring-pink-500',
hoverRingColor: 'hover:tr-ring-pink-500',
divideColor: 'tr-divide-pink-500',
outlineColor: 'tr-outline-pink-500',
@@ -2785,6 +2995,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-600',
hoverBorderColor: 'hover:tr-border-pink-600',
ringRolor: 'tr-ring-pink-600',
+ ringColor: 'tr-ring-pink-600',
hoverRingColor: 'hover:tr-ring-pink-600',
divideColor: 'tr-divide-pink-600',
outlineColor: 'tr-outline-pink-600',
@@ -2798,6 +3009,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-700',
hoverBorderColor: 'hover:tr-border-pink-700',
ringRolor: 'tr-ring-pink-700',
+ ringColor: 'tr-ring-pink-700',
hoverRingColor: 'hover:tr-ring-pink-700',
divideColor: 'tr-divide-pink-700',
outlineColor: 'tr-outline-pink-700',
@@ -2811,6 +3023,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-700',
hoverBorderColor: 'hover:tr-border-pink-700',
ringRolor: 'tr-ring-pink-700',
+ ringColor: 'tr-ring-pink-700',
hoverRingColor: 'hover:tr-ring-pink-700',
divideColor: 'tr-divide-pink-700',
outlineColor: 'tr-outline-pink-700',
@@ -2824,6 +3037,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-pink-900',
hoverBorderColor: 'hover:tr-border-pink-900',
ringRolor: 'tr-ring-pink-900',
+ ringColor: 'tr-ring-pink-900',
hoverRingColor: 'hover:tr-ring-pink-900',
divideColor: 'tr-divide-pink-900',
outlineColor: 'tr-outline-pink-900',
@@ -2839,6 +3053,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-50',
hoverBorderColor: 'hover:tr-border-rose-50',
ringRolor: 'tr-ring-rose-50',
+ ringColor: 'tr-ring-rose-50',
hoverRingColor: 'hover:tr-ring-rose-50',
divideColor: 'tr-divide-rose-50',
outlineColor: 'tr-outline-rose-50',
@@ -2852,6 +3067,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-100',
hoverBorderColor: 'hover:tr-border-rose-100',
ringRolor: 'tr-ring-rose-100',
+ ringColor: 'tr-ring-rose-100',
hoverRingColor: 'hover:tr-ring-rose-100',
divideColor: 'tr-divide-rose-100',
outlineColor: 'tr-outline-rose-100',
@@ -2865,6 +3081,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-200',
hoverBorderColor: 'hover:tr-border-rose-200',
ringRolor: 'tr-ring-rose-200',
+ ringColor: 'tr-ring-rose-200',
hoverRingColor: 'hover:tr-ring-rose-200',
divideColor: 'tr-divide-rose-200',
outlineColor: 'tr-outline-rose-200',
@@ -2878,6 +3095,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-300',
hoverBorderColor: 'hover:tr-border-rose-300',
ringRolor: 'tr-ring-rose-300',
+ ringColor: 'tr-ring-rose-300',
hoverRingColor: 'hover:tr-ring-rose-300',
divideColor: 'tr-divide-rose-300',
outlineColor: 'tr-outline-rose-300',
@@ -2891,6 +3109,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-400',
hoverBorderColor: 'hover:tr-border-rose-400',
ringRolor: 'tr-ring-rose-400',
+ ringColor: 'tr-ring-rose-400',
hoverRingColor: 'hover:tr-ring-rose-400',
divideColor: 'tr-divide-rose-400',
outlineColor: 'tr-outline-rose-400',
@@ -2904,6 +3123,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-500',
hoverBorderColor: 'hover:tr-border-rose-500',
ringRolor: 'tr-ring-rose-500',
+ ringColor: 'tr-ring-rose-500',
hoverRingColor: 'hover:tr-ring-rose-500',
divideColor: 'tr-divide-rose-500',
outlineColor: 'tr-outline-rose-500',
@@ -2917,6 +3137,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-600',
hoverBorderColor: 'hover:tr-border-rose-600',
ringRolor: 'tr-ring-rose-600',
+ ringColor: 'tr-ring-rose-600',
hoverRingColor: 'hover:tr-ring-rose-600',
divideColor: 'tr-divide-rose-600',
outlineColor: 'tr-outline-rose-600',
@@ -2930,6 +3151,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-700',
hoverBorderColor: 'hover:tr-border-rose-700',
ringRolor: 'tr-ring-rose-700',
+ ringColor: 'tr-ring-rose-700',
hoverRingColor: 'hover:tr-ring-rose-700',
divideColor: 'tr-divide-rose-700',
outlineColor: 'tr-outline-rose-700',
@@ -2943,6 +3165,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-800',
hoverBorderColor: 'hover:tr-border-rose-800',
ringRolor: 'tr-ring-rose-800',
+ ringColor: 'tr-ring-rose-800',
hoverRingColor: 'hover:tr-ring-rose-800',
divideColor: 'tr-divide-rose-800',
outlineColor: 'tr-outline-rose-800',
@@ -2956,6 +3179,7 @@ export const colorVariantMapping: {[baseColor: string]: {[colorVariant: string]:
borderColor: 'tr-border-rose-900',
hoverBorderColor: 'hover:tr-border-rose-900',
ringRolor: 'tr-ring-rose-900',
+ ringColor: 'tr-ring-rose-900',
hoverRingColor: 'hover:tr-ring-rose-900',
divideColor: 'tr-divide-rose-900',
outlineColor: 'tr-outline-rose-900',
diff --git a/src/lib/sizing.ts b/src/lib/sizing.ts
index 8031a7e40..1ac5a33b4 100644
--- a/src/lib/sizing.ts
+++ b/src/lib/sizing.ts
@@ -4,6 +4,10 @@ export type Sizing = {
}
export const sizing = {
+ none: {
+ height: 'tr-h-0',
+ width: 'tr-w-0',
+ },
threeXs: {
height: 'tr-h-0.5',
width: 'tr-w-0.5',
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index cd92b4bee..0af9029ee 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -38,7 +38,7 @@ export const DefaultResponsive = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
DefaultResponsive.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -46,7 +46,7 @@ export const WithStacked = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithStacked.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
stack: true,
};
@@ -55,7 +55,7 @@ export const WithValueFormatter = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithValueFormatter.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
valueFormatter: valueFormatter,
colors: ['blue', 'green']
@@ -65,7 +65,7 @@ export const WithAutoMinValue = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithAutoMinValue.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
autoMinValue: true,
};
@@ -74,7 +74,7 @@ export const WithCustomColors = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithCustomColors.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['blue', 'green']
};
@@ -83,7 +83,7 @@ export const WithNoGradient = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoGradient.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
showGradient: false
};
@@ -91,14 +91,14 @@ WithNoGradient.args = {
export const WithChangedCategoriesOrder = DefaultTemplate.bind({});
WithChangedCategoriesOrder.args = {
data: data,
- categories: [ 'Successfull Payments', 'Sales' ],
+ categories: [ 'Successful Payments', 'Sales' ],
dataKey: 'month',
};
export const WithLessColorsThanCategories = DefaultTemplate.bind({});
WithLessColorsThanCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['green']
};
@@ -114,7 +114,7 @@ WithLongValues.args = {
export const WithMultipleCategories = ResponsiveTemplate.bind({});
WithMultipleCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments', 'This is an edge case', 'Test' ],
+ categories: [ 'Sales', 'Successful Payments', 'This is an edge case', 'Test' ],
dataKey: 'month',
valueFormatter: valueFormatter,
};
@@ -123,7 +123,7 @@ WithMultipleCategories.args = {
export const WithNoData = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoData.args = {
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -136,7 +136,7 @@ WithNoCategories.args = {
export const WithNoDataKey = DefaultTemplate.bind({});
WithNoDataKey.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
};
diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
index 9e94fe66f..eb5850a25 100644
--- a/src/stories/chart-elements/BarChart.stories.tsx
+++ b/src/stories/chart-elements/BarChart.stories.tsx
@@ -39,7 +39,7 @@ export const DefaultResponsive = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
DefaultResponsive.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -48,7 +48,7 @@ export const WithStacked = ResponsiveTemplate.bind({});
WithStacked.args = {
data: data,
stack: true,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -57,7 +57,7 @@ export const WithRelative = ResponsiveTemplate.bind({});
WithRelative.args = {
data: data,
relative: true,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -66,14 +66,14 @@ export const WithLayoutVertical = ResponsiveTemplate.bind({});
WithLayoutVertical.args = {
data: data,
layout: 'vertical',
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
export const WithAutoMinValue = ResponsiveTemplate.bind({});
WithAutoMinValue.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
autoMinValue: true,
};
@@ -81,7 +81,7 @@ WithAutoMinValue.args = {
export const WithAutoMinValueAndLayoutVertical = ResponsiveTemplate.bind({});
WithAutoMinValueAndLayoutVertical.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
layout: 'vertical',
autoMinValue: true,
@@ -91,7 +91,7 @@ export const WithValueFormatter = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithValueFormatter.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
valueFormatter: valueFormatter,
colors: ['blue', 'green']
@@ -101,7 +101,7 @@ export const WithCustomColors = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithCustomColors.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['blue', 'green']
};
@@ -110,7 +110,7 @@ export const WithNoGradient = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoGradient.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
showGradient: false
};
@@ -118,14 +118,14 @@ WithNoGradient.args = {
export const WithChangedCategoriesOrder = DefaultTemplate.bind({});
WithChangedCategoriesOrder.args = {
data: data,
- categories: [ 'Successfull Payments', 'Sales' ],
+ categories: [ 'Successful Payments', 'Sales' ],
dataKey: 'month',
};
export const WithLessColorsThanCategories = DefaultTemplate.bind({});
WithLessColorsThanCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['green']
};
@@ -141,7 +141,7 @@ WithLongValues.args = {
export const WithMultipleCategories = ResponsiveTemplate.bind({});
WithMultipleCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments', 'This is an edge case', 'Test' ],
+ categories: [ 'Sales', 'Successful Payments', 'This is an edge case', 'Test' ],
dataKey: 'month',
valueFormatter: valueFormatter,
};
@@ -150,7 +150,7 @@ WithMultipleCategories.args = {
export const WithNoData = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoData.args = {
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -163,5 +163,5 @@ WithNoCategories.args = {
export const WithNoDataKey = DefaultTemplate.bind({});
WithNoDataKey.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
};
diff --git a/src/stories/chart-elements/DonutChart.stories.tsx b/src/stories/chart-elements/DonutChart.stories.tsx
index 053c8ba60..151faf844 100644
--- a/src/stories/chart-elements/DonutChart.stories.tsx
+++ b/src/stories/chart-elements/DonutChart.stories.tsx
@@ -90,9 +90,9 @@ WithValueFormatter.args = {
dataKey: 'city',
};
-export const WithCusomLabel = ResponsiveTemplate.bind({});
+export const WithCustomLabel = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
-WithCusomLabel.args = {
+WithCustomLabel.args = {
data: data,
valueFormatter: valueFormatter,
label: 'Hello there',
diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
index a2e371bca..413553d3e 100644
--- a/src/stories/chart-elements/LineChart.stories.tsx
+++ b/src/stories/chart-elements/LineChart.stories.tsx
@@ -38,14 +38,14 @@ export const DefaultResponsive = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
DefaultResponsive.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
export const WithAutoMinValue = ResponsiveTemplate.bind({});
WithAutoMinValue.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
autoMinValue: true,
};
@@ -54,7 +54,7 @@ export const WithValueFormatter = ResponsiveTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithValueFormatter.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
valueFormatter: valueFormatter,
colors: ['blue', 'green']
@@ -64,7 +64,7 @@ export const WithCustomColors = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithCustomColors.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['blue', 'green']
};
@@ -73,7 +73,7 @@ export const WithNoGradient = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoGradient.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
showGradient: false
};
@@ -81,14 +81,14 @@ WithNoGradient.args = {
export const WithChangedCategoriesOrder = DefaultTemplate.bind({});
WithChangedCategoriesOrder.args = {
data: data,
- categories: [ 'Successfull Payments', 'Sales' ],
+ categories: [ 'Successful Payments', 'Sales' ],
dataKey: 'month',
};
export const WithLessColorsThanCategories = DefaultTemplate.bind({});
WithLessColorsThanCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
colors: ['green']
};
@@ -104,7 +104,7 @@ WithLongValues.args = {
export const WithMultipleCategories = ResponsiveTemplate.bind({});
WithMultipleCategories.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments', 'This is an edge case', 'Test' ],
+ categories: [ 'Sales', 'Successful Payments', 'This is an edge case', 'Test' ],
dataKey: 'month',
valueFormatter: valueFormatter,
};
@@ -112,7 +112,7 @@ WithMultipleCategories.args = {
export const WithNoData = DefaultTemplate.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
WithNoData.args = {
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
dataKey: 'month',
};
@@ -125,5 +125,5 @@ WithNoCategories.args = {
export const WithNoDataKey = DefaultTemplate.bind({});
WithNoDataKey.args = {
data: data,
- categories: [ 'Sales', 'Successfull Payments' ],
+ categories: [ 'Sales', 'Successful Payments' ],
};
diff --git a/src/stories/chart-elements/helpers/testData.tsx b/src/stories/chart-elements/helpers/testData.tsx
index d14fe2f49..879f68333 100644
--- a/src/stories/chart-elements/helpers/testData.tsx
+++ b/src/stories/chart-elements/helpers/testData.tsx
@@ -2,49 +2,49 @@ export const simpleBaseChartData = [
{
month: 'Jan 21\'',
Sales: 4000,
- 'Successfull Payments': 3000,
+ 'Successful Payments': 3000,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'Feb 21\'',
Sales: 3000,
- 'Successfull Payments': 2000,
+ 'Successful Payments': 2000,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'Mar 21\'',
Sales: 2000,
- 'Successfull Payments': 1700,
+ 'Successful Payments': 1700,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'Apr 21\'',
Sales: 2780,
- 'Successfull Payments': 2500,
+ 'Successful Payments': 2500,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'May 21',
Sales: 1890,
- 'Successfull Payments': 1000,
+ 'Successful Payments': 1000,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'Jun 21\'',
Sales: 2390,
- 'Successfull Payments': 2000,
+ 'Successful Payments': 2000,
'This is an edge case': 100000000,
'Test': 5000,
},
{
month: 'Jul 21\'',
Sales: 3490,
- 'Successfull Payments': 3000,
+ 'Successful Payments': 3000,
'This is an edge case': 100000000,
'Test': 5000,
},
diff --git a/src/stories/layout-elements/helpers/SimpleText.tsx b/src/stories/layout-elements/helpers/SimpleText.tsx
index 22d3d1328..b2b527f06 100644
--- a/src/stories/layout-elements/helpers/SimpleText.tsx
+++ b/src/stories/layout-elements/helpers/SimpleText.tsx
@@ -7,7 +7,7 @@ export const SimpleText = () => (
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
- into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+ into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
diff --git a/src/stories/text-elements/Legend.stories.tsx b/src/stories/text-elements/Legend.stories.tsx
index 6dc6ff103..414e13c06 100644
--- a/src/stories/text-elements/Legend.stories.tsx
+++ b/src/stories/text-elements/Legend.stories.tsx
@@ -22,7 +22,7 @@ export const Default = Template.bind({});
Default.args = {
categories: [
'Critical',
- 'This is a very long catergory name to test an edge case',
+ 'This is a very long category name to test an edge case',
'Category C',
'Category D',
]
From b7dc5b60d33a45eec5f4e640c449b78998bd9f58 Mon Sep 17 00:00:00 2001
From: Achilleas Mitrotasios <58337217+mitrotasios@users.noreply.github.com>
Date: Sat, 10 Dec 2022 00:07:39 +0000
Subject: [PATCH 027/183] fix: categoryBar labels & rm ring color select items
(#236)
---
.../input-elements/Datepicker/Datepicker.tsx | 7 ++-----
.../input-elements/Dropdown/Dropdown.tsx | 3 +--
.../MultiSelectBox/MultiSelectBox.tsx | 3 +--
.../input-elements/SelectBox/SelectBox.tsx | 3 +--
src/components/input-elements/Tab/Tab.tsx | 1 +
.../vis-elements/CategoryBar/CategoryBar.tsx | 5 +++--
.../vis-elements/CategoryBar.stories.tsx | 17 +++++++++++++++++
7 files changed, 26 insertions(+), 13 deletions(-)
diff --git a/src/components/input-elements/Datepicker/Datepicker.tsx b/src/components/input-elements/Datepicker/Datepicker.tsx
index 167a6e178..b07b6e7e6 100644
--- a/src/components/input-elements/Datepicker/Datepicker.tsx
+++ b/src/components/input-elements/Datepicker/Datepicker.tsx
@@ -91,12 +91,10 @@ const DatepickerButton = ({
ref={ datePickerRef }
onClick={ () => setShowDatePickerModal(!showDatePickerModal) }
className={ classNames(
- 'input-elem tr-flex tr-items-center tr-w-full tr-truncate',
- 'focus:tr-ring-2 focus:tr-outline-none focus:tr-z-10',
+ 'input-elem tr-flex tr-items-center tr-w-full tr-truncate focus:tr-ring-0 focus:tr-outline-0',
enableRelativeDates ? border.none.right : classNames(borderRadius.md.right, border.sm.right),
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
- getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
spacing.twoXl.paddingLeft,
spacing.twoXl.paddingRight,
spacing.sm.paddingTop,
@@ -134,10 +132,9 @@ const DatepickerButton = ({
onClick={ () => setShowDropdownModal(!showDropdownModal) }
className={ classNames(
'input-elem tr-inline-flex tr-justify-between tr-w-48 tr-truncate',
- 'focus:tr-ring-2 focus:tr-outline-none',
+ 'focus:tr-ring-0 focus:tr-outline-0',
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
- getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
spacing.twoXl.paddingLeft,
spacing.twoXl.paddingRight,
spacing.px.negativeMarginLeft,
diff --git a/src/components/input-elements/Dropdown/Dropdown.tsx b/src/components/input-elements/Dropdown/Dropdown.tsx
index 94ba5b9e6..00e0e7d05 100644
--- a/src/components/input-elements/Dropdown/Dropdown.tsx
+++ b/src/components/input-elements/Dropdown/Dropdown.tsx
@@ -75,10 +75,9 @@ const Dropdown = ({
type="button"
className={ classNames(
'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
- 'focus:tr-ring-2 focus:tr-outline-0',
+ 'focus:tr-outline-0 focus:tr-ring-0',
getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
- getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
spacing.twoXl.paddingLeft,
spacing.twoXl.paddingRight,
spacing.sm.paddingTop,
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
index bbaed1ac6..dcfe812ff 100644
--- a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
+++ b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
@@ -88,10 +88,9 @@ const MultiSelectBox = ({
type="button"
className={ classNames(
'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
- 'focus:tr-ring-2 focus:tr-outline-0',
+ 'focus:tr-ring-0 focus:tr-outline-0',
getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
- getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
spacing.twoXl.paddingLeft,
spacing.twoXl.paddingRight,
spacing.sm.paddingTop,
diff --git a/src/components/input-elements/SelectBox/SelectBox.tsx b/src/components/input-elements/SelectBox/SelectBox.tsx
index 8c369569e..549319382 100644
--- a/src/components/input-elements/SelectBox/SelectBox.tsx
+++ b/src/components/input-elements/SelectBox/SelectBox.tsx
@@ -72,10 +72,9 @@ const SelectBox = ({
) }>
@@ -76,13 +77,13 @@ const BarLabels = ({ categoryPercentageValues }: {categoryPercentageValues: numb
);
}) }
0
{ sumValues }
diff --git a/src/stories/vis-elements/CategoryBar.stories.tsx b/src/stories/vis-elements/CategoryBar.stories.tsx
index a11551e6b..fd58a8398 100644
--- a/src/stories/vis-elements/CategoryBar.stories.tsx
+++ b/src/stories/vis-elements/CategoryBar.stories.tsx
@@ -90,3 +90,20 @@ WithConsecutiveSmallValues.args = {
tooltip: '90%',
marginTop: 'mt-5'
};
+
+export const WithNoLabelsInbetween = Template.bind({});
+WithNoLabelsInbetween.args = {
+ categoryPercentageValues: [5, 95],
+ percentageValue: 50,
+ tooltip: '90%',
+ marginTop: 'mt-5'
+};
+
+export const WithNoLabels = Template.bind({});
+WithNoLabels.args = {
+ categoryPercentageValues: [5, 95],
+ percentageValue: 50,
+ tooltip: '90%',
+ marginTop: 'mt-5',
+ showLabels: false,
+};
From d6a9402593bf056f566b4edd57723a75c10377be Mon Sep 17 00:00:00 2001
From: Achilleas Mitrotasios <58337217+mitrotasios@users.noreply.github.com>
Date: Fri, 16 Dec 2022 23:36:28 +0000
Subject: [PATCH 028/183] feat: TextInput, minValue/maxValue in Charts, Button
type (#240)
---
src/assets/ExclamationFilledIcon.tsx | 11 ++
src/assets/index.ts | 1 +
.../chart-elements/AreaChart/AreaChart.tsx | 11 +-
.../chart-elements/BarChart/BarChart.tsx | 11 +-
.../chart-elements/LineChart/LineChart.tsx | 9 +-
.../chart-elements/common/BaseChartProps.tsx | 4 +-
.../{constructCategoryColors.ts => utils.ts} | 10 ++
.../input-elements/Button/Button.tsx | 26 +++-
.../ButtonInline/ButtonInline.tsx | 30 +++-
.../input-elements/Dropdown/Dropdown.tsx | 50 ++++--
.../MultiSelectBox/MultiSelectBox.tsx | 47 ++++--
.../input-elements/SelectBox/SelectBox.tsx | 126 +++++++++------
src/components/input-elements/Tab/Tab.tsx | 2 +-
.../input-elements/TextInput/TextInput.tsx | 146 ++++++++++++++++++
.../input-elements/TextInput/index.ts | 1 +
src/components/input-elements/index.ts | 1 +
src/lib/inputTypes.ts | 2 +
.../chart-elements/AreaChart.stories.tsx | 10 ++
.../chart-elements/BarChart.stories.tsx | 9 ++
.../chart-elements/LineChart.stories.tsx | 9 ++
src/stories/input-elements/Button.stories.tsx | 24 +--
.../input-elements/Dropdown.stories.tsx | 13 +-
.../input-elements/MultiSelectBox.stories.tsx | 13 +-
.../input-elements/SelectBox.stories.tsx | 11 +-
.../input-elements/TextInput.stories.tsx | 70 +++++++++
src/tremor.css | 7 +-
26 files changed, 540 insertions(+), 114 deletions(-)
create mode 100644 src/assets/ExclamationFilledIcon.tsx
rename src/components/chart-elements/common/{constructCategoryColors.ts => utils.ts} (55%)
create mode 100644 src/components/input-elements/TextInput/TextInput.tsx
create mode 100644 src/components/input-elements/TextInput/index.ts
create mode 100644 src/stories/input-elements/TextInput.stories.tsx
diff --git a/src/assets/ExclamationFilledIcon.tsx b/src/assets/ExclamationFilledIcon.tsx
new file mode 100644
index 000000000..32fa3b3b6
--- /dev/null
+++ b/src/assets/ExclamationFilledIcon.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+const ExclamationFilledIcon = ({ ...props }) => (
+
+);
+
+export default ExclamationFilledIcon;
+
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 54594ea05..8efd5a8d8 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -10,6 +10,7 @@ export { default as ArrowUpHeadIcon } from './ArrowUpHeadIcon';
export { default as ArrowUpIcon } from './ArrowUpIcon';
export { default as ArrowUpRightIcon } from './ArrowUpRightIcon';
export { default as CalendarIcon } from './CalendarIcon';
+export { default as ExclamationFilledIcon } from './ExclamationFilledIcon';
export { default as LoadingSpinner } from './LoadingSpinner';
export { default as SearchIcon } from './SearchIcon';
export { default as XCircleIcon } from './XCircleIcon';
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 31435ac00..e73c9dc6d 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -11,10 +11,10 @@ import {
YAxis,
} from 'recharts';
+import { constructCategoryColors, getYAxisDomain } from '../common/utils';
import BaseChartProps from '../common/BaseChartProps';
import ChartLegend from '../common/ChartLegend';
import ChartTooltip from '../common/ChartTooltip';
-import { constructCategoryColors } from '../common/constructCategoryColors';
import {
classNames,
@@ -26,6 +26,7 @@ import {
parseMarginTop,
themeColorRange
} from 'lib';
+import { AxisDomain } from 'recharts/types/util/types';
export interface AreaChartProps extends BaseChartProps {
stack?: boolean,
@@ -36,7 +37,6 @@ const AreaChart = ({
categories = [],
dataKey,
stack = false,
- autoMinValue = false,
colors = themeColorRange,
valueFormatter = defaultValueFormatter,
startEndOnly = false,
@@ -50,10 +50,15 @@ const AreaChart = ({
showGradient = true,
height = 'h-80',
marginTop = 'mt-0',
+ autoMinValue = false,
+ minValue,
+ maxValue,
}: AreaChartProps) => {
const [legendHeight, setLegendHeight] = useState(60);
const categoryColors = constructCategoryColors(categories, colors);
+ const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+
return (
{
const [legendHeight, setLegendHeight] = useState(60);
const categoryColors = constructCategoryColors(categories, colors);
+ const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+
return (
{
const [legendHeight, setLegendHeight] = useState(60);
const categoryColors = constructCategoryColors(categories, colors);
+ const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+
return (
{
+ const minDomain = autoMinValue ? 'auto' : (minValue ?? 0);
+ const maxDomain = maxValue ?? 'auto';
+ return [minDomain, maxDomain];
+};
diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx
index dcd7d941d..06bc3e917 100644
--- a/src/components/input-elements/Button/Button.tsx
+++ b/src/components/input-elements/Button/Button.tsx
@@ -19,7 +19,7 @@ import {
sizing,
spacing,
} from 'lib';
-import { Color, HorizontalPosition, Importance, MarginTop, Size } from '../../../lib';
+import { ButtonType, Color, HorizontalPosition, Importance, MarginTop, Size } from '../../../lib';
import {
buttonProportions,
colors,
@@ -87,13 +87,18 @@ export const ButtonIconOrSpinner = ({
};
export interface ButtonProps {
+ type?: ButtonType,
text: string,
+ value?: any,
icon?: React.ElementType,
iconPosition?: HorizontalPosition,
size?: Size,
color?: Color,
importance?: Importance,
- handleClick?: { (): void },
+ handleClick?: () => void,
+ onClick?: React.MouseEventHandler
,
+ onSubmit?: React.FormEventHandler,
+ onReset?: React.FormEventHandler,
marginTop?: MarginTop,
disabled?: boolean,
loading?: boolean,
@@ -101,10 +106,15 @@ export interface ButtonProps {
}
const Button = ({
+ type = 'button',
text,
+ value,
icon,
iconPosition = HorizontalPositions.Left,
handleClick,
+ onClick,
+ onSubmit,
+ onReset,
size = Sizes.SM,
color = BaseColors.Blue,
importance = Importances.Primary,
@@ -113,6 +123,11 @@ const Button = ({
loading = false,
loadingText,
}: ButtonProps) => {
+ if (handleClick) {
+ console.warn('DeprecationWarning: The `handleClick` property will be depracated in the next major release. \
+ Please use `onClick` instead.');
+ }
+
const Icon = icon;
const isDisabled = loading || disabled;
@@ -132,8 +147,11 @@ const Button = ({
{ state => (