bug: improve text colors and default button color

josemarluedke · Feb 23, 2024 · ab5b123 · ab5b123
1 parent fd93ccc
commit ab5b123
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/packages/theme/src/colors/semantic.ts b/packages/theme/src/colors/semantic.ts
@@ -15,7 +15,7 @@ const base: SemanticBaseColors = {
     },
     foreground: {
       ...gray,
-      DEFAULT: gray[950]
+      DEFAULT: gray[800]
     },
     divider: {
       DEFAULT: 'rgba(17, 17, 17, 0.15)'
@@ -28,19 +28,19 @@ const base: SemanticBaseColors = {
     },
     content1: {
       DEFAULT: '#FFFFFF',
-      foreground: gray[950]
+      foreground: gray[800]
     },
     content2: {
       DEFAULT: gray[100],
       foreground: gray[800]
     },
     content3: {
       DEFAULT: gray[200],
-      foreground: gray[700]
+      foreground: gray[800]
     },
     content4: {
       DEFAULT: gray[300],
-      foreground: gray[600]
+      foreground: gray[800]
     }
   },
   dark: {
@@ -49,7 +49,7 @@ const base: SemanticBaseColors = {
     },
     foreground: {
       ...swapColorValues(gray),
-      DEFAULT: gray[50]
+      DEFAULT: gray[200]
     },
     focus: {
       DEFAULT: blue[500]
@@ -62,19 +62,19 @@ const base: SemanticBaseColors = {
     },
     content1: {
       DEFAULT: gray[900],
-      foreground: gray[50]
+      foreground: gray[200]
     },
     content2: {
       DEFAULT: gray[800],
-      foreground: gray[100]
+      foreground: gray[200]
     },
     content3: {
       DEFAULT: gray[700],
-      foreground: gray[200]
+      foreground: gray[100]
     },
     content4: {
       DEFAULT: gray[600],
-      foreground: gray[300]
+      foreground: gray[50]
     }
   }
 };

diff --git a/packages/theme/src/components/button.ts b/packages/theme/src/components/button.ts
@@ -93,8 +93,7 @@ const button = tv({
     {
       appearance: 'default',
       intent: 'default',
-      class:
-        'bg-default-800 text-default-50 hover:bg-default-800/80 dark:bg-default dark:text-default-950 dark:hover:bg-default/40'
+      class: 'bg-default-800 text-default-100 hover:bg-default-800/80'
     },
     {
       appearance: 'default',
@@ -114,7 +113,7 @@ const button = tv({
     {
       appearance: 'default',
       intent: 'danger',
-      class: 'bg-danger-500 text-danger-foreground hover:bg-danger-500/80'
+      class: 'bg-danger text-danger-foreground hover:bg-danger/80'
     },
 
     // APPEARANCE: minimal

diff --git a/packages/theme/src/components/forms/form-field.ts b/packages/theme/src/components/forms/form-field.ts
@@ -144,7 +144,7 @@ const select = tv({
     trigger: [
       input(),
       'flex items-center justify-between',
-      'disabled:cursor-not-allowed disabled:opacity-50'
+      'disabled:cursor-not-allowed'
     ],
     placeholder: 'text-default-400',
     listbox: 'scroll-py-6 max-h-64',

diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
@@ -1,9 +1,9 @@
 {{page-title "Frontile Home"}}
 <div class="grid grid-flow-col justify-center gap-4 font-mono font-bold text-xs text-center">
-  <div class="items-center justify-center bg-content1 rounded-lg shadow-lg size-40 hidden md:grid">bg-content1</div>
-  <div class="items-center justify-center bg-content2 rounded-lg shadow-lg size-40 hidden md:grid">bg-content2</div>
-  <div class="items-center justify-center bg-content3 rounded-lg shadow-lg size-40 hidden md:grid">bg-content3</div>
-  <div class="items-center justify-center bg-content4 rounded-lg shadow-lg size-40 hidden md:grid">bg-content4</div>
+  <div class="items-center justify-center text-content1-foreground bg-content1 rounded-lg shadow-lg size-40 hidden md:grid">bg-content1</div>
+  <div class="items-center justify-center text-content2-foreground bg-content2 rounded-lg shadow-lg size-40 hidden md:grid">bg-content2</div>
+  <div class="items-center justify-center text-content3-foreground bg-content3 rounded-lg shadow-lg size-40 hidden md:grid">bg-content3</div>
+  <div class="items-center justify-center text-content4-foreground bg-content4 rounded-lg shadow-lg size-40 hidden md:grid">bg-content4</div>
 </div>
 
 
@@ -42,4 +42,4 @@
       </div>
     </div>
   {{/each}}
-</div>
+</div>