fix: missing token color

leather-io · May 20, 2024 · caa4c88 · caa4c88
1 parent 2db97bd
commit caa4c88
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 18 deletions.
diff --git a/src/app/features/hiro-messages/in-app-messages.tsx b/src/app/features/hiro-messages/in-app-messages.tsx
@@ -30,7 +30,7 @@ export function InAppMessages(props: FlexProps) {
   }
 
   return (
-    <Flex bg="ink.non-interactive" {...props}>
+    <Flex bg="ink.text-non-interactive" {...props}>
       <HiroMessageItem onDismiss={messageId => dismissMessage(messageId)} {...firstMessage} />
     </Flex>
   );

diff --git a/src/app/ui/components/callout/callout.tsx b/src/app/ui/components/callout/callout.tsx
@@ -15,7 +15,7 @@ const calloutRecipe = cva({
   variants: {
     variant: {
       default: {
-        bg: 'ink.non-interactive',
+        bg: 'ink.text-non-interactive',
       },
       error: {
         bg: 'red.background-secondary',

diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx
@@ -80,7 +80,7 @@ const input = sva({
       borderColor: 'ink.border-transparent',
       _disabled: {
         bg: 'ink.component-background-default',
-        borderColor: 'ink.non-interactive',
+        borderColor: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       _focus: { ring: 'none' },

diff --git a/src/app/ui/components/skeleton-loader/skeleton-loader.tsx b/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
@@ -20,7 +20,7 @@ export function SkeletonLoader({
       <Box
         width={width}
         height={height}
-        bgColor="ink.non-interactive"
+        bgColor="ink.text-non-interactive"
         data-state="loading"
         borderRadius="sm"
         className={shimmerStyles}

diff --git a/src/app/ui/components/typography/caption.tsx b/src/app/ui/components/typography/caption.tsx
@@ -5,7 +5,7 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 export const Caption = forwardRef<HTMLSpanElement, HTMLStyledProps<'span'>>(
   ({ children, ...props }, ref) => (
     <styled.span
-      _disabled={{ color: 'ink.non-interactive' }}
+      _disabled={{ color: 'ink.text-non-interactive' }}
       color="ink.text-subdued"
       ref={ref}
       textStyle="caption.01"

diff --git a/src/app/ui/components/typography/title.tsx b/src/app/ui/components/typography/title.tsx
@@ -5,7 +5,7 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 export const Title = forwardRef<HTMLSpanElement, HTMLStyledProps<'span'>>(
   ({ children, ...props }, ref) => (
     <styled.span
-      _disabled={{ color: 'ink.non-interactive' }}
+      _disabled={{ color: 'ink.text-non-interactive' }}
       color="ink.text-primary"
       display="block"
       ref={ref}

diff --git a/src/app/ui/pressable/pressable.tsx b/src/app/ui/pressable/pressable.tsx
@@ -54,7 +54,7 @@ export const pressableStyles = css.raw({
     _active: { bg: 'unset' },
     _focus: { border: 'unset' },
     _hover: { bg: 'unset' },
-    color: 'ink.non-interactive',
+    color: 'ink.text-non-interactive',
     cursor: 'not-allowed',
   },
 
@@ -77,12 +77,12 @@ const pressableRecipe = cva({
 });
 
 export const pressableCaptionStyles = css({
-  _groupDisabled: { color: 'ink.non-interactive' },
+  _groupDisabled: { color: 'ink.text-non-interactive' },
   color: 'ink.text-subdued',
 });
 
 export const pressableChevronStyles = css({
-  _groupDisabled: { color: 'ink.non-interactive' },
+  _groupDisabled: { color: 'ink.text-non-interactive' },
   color: 'ink.action-primary-default',
 });
 

diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts
@@ -53,7 +53,7 @@ export const buttonRecipe = defineRecipe({
         _disabled: {
           _hover: { bg: 'ink.background-secondary' },
           bg: 'ink.background-secondary',
-          color: 'ink.non-interactive',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {
@@ -75,8 +75,8 @@ export const buttonRecipe = defineRecipe({
         },
         _disabled: {
           _hover: { bg: 'unset' },
-          border: '1px solid {colors.ink.non-interactive}',
-          color: 'ink.non-interactive',
+          border: '1px solid {colors.ink.text-non-interactive}',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {
@@ -97,7 +97,7 @@ export const buttonRecipe = defineRecipe({
         },
         _disabled: {
           _hover: { bg: 'unset' },
-          color: 'ink.non-interactive',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {

diff --git a/theme/recipes/link-recipe.ts b/theme/recipes/link-recipe.ts
@@ -31,7 +31,7 @@ export const linkRecipe = defineRecipe({
       underlined: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
@@ -129,14 +129,14 @@ export const linkRecipe = defineRecipe({
       css: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
           position: 'absolute',
           right: 0,
         },
-        color: 'ink.non-interactive',
+        color: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       disabled: true,
@@ -146,15 +146,15 @@ export const linkRecipe = defineRecipe({
       css: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
           position: 'absolute',
           right: 0,
           visibility: 'visible',
         },
-        color: 'ink.non-interactive',
+        color: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       disabled: true,