Repository: marigold-ui/marigold
Pull request #3133 (2023-07-14 07:42:44)

fix: focus state if readonly (Input components) b2b theme

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 339acf1cb93b30857715bd54a99dbf590eb1136f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/textarea--readonly?filename=.changeset/dirty-scissors-press.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A%22%40marigold%2Ftheme-b2b%22%3A%20patch%0A---%0A%0Afix%3A%20focus%20state%20if%20readonly%20(Input%20components)%20b2b%20theme%0A)


vercel[bot]: [vc]: #1av0qQoUGS/F9ZpOqREoBkzQUKCfi5rsHJOkVBYvO5g=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9tYXJpZ29sZC9tYXJpZ29sZC80MVE1dXdkVUNqWHNYWXFLWTJoMzdNRFpTY3JDIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkcifSx7Im5hbWUiOiJtYXJpZ29sZC1kb2NzIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL21hcmlnb2xkL21hcmlnb2xkLWRvY3MvR0pMd2N2c2gxcWFKTGdRbzNHb0N2ZnA5ZTFQTCIsIm5leHRDb21taXRTdGF0dXMiOiJQRU5ESU5HIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold/41Q5uwdUCjXsXYqKY2h37MDZScrC)) |  | Jul 14, 2023 7:42am |
| **marigold-docs** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-docs/GJLwcvsh1qaJLgQo3GoCvfp9e1PL)) |  | Jul 14, 2023 7:42am |



codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3133](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (339acf1) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/87c28db12b8ad6346a2343adfcdd594d5d76f5d6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (87c28db) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3133   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          110       110           
  Lines         6885      6886    +1     
  Branches       310       310           
=========================================
+ Hits          6885      6886    +1     
```

| [Impacted Files](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | Coverage Δ | |
|---|---|---|
| [packages/components/src/DateField/DateField.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3133?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvRGF0ZUZpZWxkL0RhdGVGaWVsZC50c3g=) | `100.00% <100.00%> (ø)` | |


Patch:
diff --git a/.changeset/nervous-rules-admire.md b/.changeset/nervous-rules-admire.md
new file mode 100644
index 000000000..9e50863e4
--- /dev/null
+++ b/.changeset/nervous-rules-admire.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: `<Text>` component doesn't enforce defaults
diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx
index a4cf680c9..4fbcf24f2 100644
--- a/packages/components/src/DateField/DateField.tsx
+++ b/packages/components/src/DateField/DateField.tsx
@@ -83,11 +83,13 @@ export const DateField = ({
   const stateProps = useStateProps({
     hover: isHovered,
     error,
+    readOnly,
     disabled,
     required,
     focus: isFocused || isPressed,
   });
 
+  console.log(readOnly);
   return (
     <FieldBase
       error={error}
@@ -128,8 +130,7 @@ export const DateField = ({
         ) : (
           <div className="flex items-center justify-center">
             <svg
-              data-testid="a
-              ction"
+              data-testid="action"
               className={cn(classNames.action)}
               viewBox="0 0 24 24"
               width={24}
diff --git a/packages/components/src/Menu/MenuSection.tsx b/packages/components/src/Menu/MenuSection.tsx
index 050e95b73..6d484a935 100644
--- a/packages/components/src/Menu/MenuSection.tsx
+++ b/packages/components/src/Menu/MenuSection.tsx
@@ -24,7 +24,7 @@ const MenuSection = ({ onAction, item, state }: MenuSectionProps<object>) => {
     <>
       {item.key !== state.collection.getFirstKey() && (
         <li>
-          <Divider />
+          <Divider variant="section" />
         </li>
       )}
       <li {...itemProps}>
diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx
index d6ec01d6e..3e20181c6 100644
--- a/packages/components/src/Text/Text.tsx
+++ b/packages/components/src/Text/Text.tsx
@@ -39,11 +39,11 @@ export const Text = ({
   variant,
   size,
   color,
-  align = 'none',
-  cursor = 'default',
-  weight = 'normal',
-  fontSize = 'xs',
-  fontStyle = 'normal',
+  align,
+  cursor,
+  weight,
+  fontSize,
+  fontStyle,
   children,
   ...props
 }: TextProps) => {
@@ -60,11 +60,11 @@ export const Text = ({
       className={cn(
         classNames,
         'text-[--color] outline-[--outline]',
-        textStyle[fontStyle],
-        textAlign[align],
-        cursorStyle[cursor],
-        fontWeight[weight],
-        textSize[fontSize]
+        fontStyle && textStyle[fontStyle],
+        align && textAlign[align],
+        cursor && cursorStyle[cursor],
+        weight && fontWeight[weight],
+        fontSize && textSize[fontSize]
       )}
       style={createVar({
         color:
diff --git a/themes/theme-b2b/src/components/Button.styles.ts b/themes/theme-b2b/src/components/Button.styles.ts
index c07b99769..0a4f4f032 100644
--- a/themes/theme-b2b/src/components/Button.styles.ts
+++ b/themes/theme-b2b/src/components/Button.styles.ts
@@ -18,12 +18,12 @@ export const Button: ThemeComponent<'Button'> = cva(
         ],
         ghost: [
           'border-border-dark border border-solid',
-          'text-text-primary',
+          'text-text-body',
           'hover:bg-bg-hover',
         ],
-        text: ['text-text-primary data-[hover]:bg-bg-hover'],
+        text: ['text-text-body data-[hover]:bg-bg-hover'],
         menu: [
-          'text-text-primary bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover',
+          'text-text-body bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover',
         ],
       },
       size: {
diff --git a/themes/theme-b2b/src/components/DateField.styles.ts b/themes/theme-b2b/src/components/DateField.styles.ts
index cafdd0e71..f7b7c5f65 100644
--- a/themes/theme-b2b/src/components/DateField.styles.ts
+++ b/themes/theme-b2b/src/components/DateField.styles.ts
@@ -6,6 +6,7 @@ export const DateField: ThemeComponent<'DateField'> = {
     'border-border-light rounded-sm border outline-none',
     'h-[34px] px-2',
     'group-hover/field:border-border-hover',
+    'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:outline-none',
     'group-focus/field:border-border-focus group-focus/field:outline-outline-focus group-focus/field:-outline-offset-1',
     ' group-disabled/field:bg-bg-disabled group-disabled/field:border-border-disabled group-disabled/field:text-text-disabled',
     ' group-readonly/field:bg-bg-transparent group-readonly/field:text-text-disabled',
diff --git a/themes/theme-b2b/src/components/DatePicker.styles.ts b/themes/theme-b2b/src/components/DatePicker.styles.ts
index 28a5302e7..8480f3a03 100644
--- a/themes/theme-b2b/src/components/DatePicker.styles.ts
+++ b/themes/theme-b2b/src/components/DatePicker.styles.ts
@@ -5,7 +5,7 @@ export const DatePicker: ThemeComponent<'DatePicker'> = {
   button: cva([
     'h-full w-9 p-0',
     'flex items-center justify-center ',
-    'text-text-primary/80',
+    'text-text-body/80',
     'data-[hover]:bg-bg-hover group-focus/field:bg-bg-hover group-focus/field:[&[aria-expanded=true]]:bg-bg-secondary focus-visible:border-none focus-visible:outline-0 group-focus/field:text-white data-[hover]:text-white',
     'disabled:hidden',
   ]),
diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts
index a668829bd..a0128a111 100644
--- a/themes/theme-b2b/src/components/Input.styles.ts
+++ b/themes/theme-b2b/src/components/Input.styles.ts
@@ -8,6 +8,7 @@ export const Input: ThemeComponent<'Input'> = {
     'border-border-light rounded-sm border  outline-none',
     'px-2 leading-[2]',
     'hover:border-border-hover',
+    'read-only:focus:border-border-light read-only:focus:outline-none',
     'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1',
     'disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed ',
     'data-[error]:border-border-error data-[error]:outline-outline-error data-[error]:-outline-offset-1',
diff --git a/themes/theme-b2b/src/components/ListBox.styles.ts b/themes/theme-b2b/src/components/ListBox.styles.ts
index 794c1f8d7..e17369b54 100644
--- a/themes/theme-b2b/src/components/ListBox.styles.ts
+++ b/themes/theme-b2b/src/components/ListBox.styles.ts
@@ -1,7 +1,7 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 // Make sure ListBox looks correct if is in an overlay
-const font = 'font-body text-text-primary';
+const font = 'font-body text-text-body';
 
 export const ListBox: ThemeComponent<'ListBox'> = {
   container: cva([
@@ -23,5 +23,5 @@ export const ListBox: ThemeComponent<'ListBox'> = {
   section: cva(
     '[&:nth-child(n+1)]:border-border-light outline-none [&:nth-child(n+1)]:border-t-[1px_solid]'
   ),
-  sectionTitle: cva('text-text-primary-light px-2 pt-2 text-sm'),
+  sectionTitle: cva('text-text-body-accent px-2 pt-2 text-sm'),
 };
diff --git a/themes/theme-b2b/src/components/Menu.styles.ts b/themes/theme-b2b/src/components/Menu.styles.ts
index 71c58d99c..32665fc26 100644
--- a/themes/theme-b2b/src/components/Menu.styles.ts
+++ b/themes/theme-b2b/src/components/Menu.styles.ts
@@ -7,5 +7,5 @@ export const Menu: ThemeComponent<'Menu'> = {
     ' overflow-y-auto overflow-x-hidden',
   ]),
   item: cva('focus:bg-bg-focus cursor-pointer px-4 py-1 outline-none'),
-  section: cva('text-text-primary-light p-4 text-sm'),
+  section: cva('text-text-body-accent p-4 text-sm'),
 };
diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts
index 11260f495..50eb3921b 100644
--- a/themes/theme-b2b/src/components/NumberField.styles.ts
+++ b/themes/theme-b2b/src/components/NumberField.styles.ts
@@ -4,12 +4,13 @@ export const NumberField: ThemeComponent<'NumberField'> = {
   group: cva([
     'border-border-light rounded-sm border border-solid',
     'data-[hover]:border-border-hover',
+    'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none',
     'data-[focus]:border-border-focus data-[focus]:shadow-shadow-focus data-[focus]:shadow-[0_0_0_1px]',
     'data-[disabled]:bg-bg-disabled data-[disabled]:text-text-disabled data-[disabled]:cursor-not-allowed ',
     'data-[error]:border-border-error data-[error]:shadow-shadow-error data-[error]:shadow-[0_0_0_1px]',
   ]),
   stepper: cva([
-    'text-text-primary w-7',
+    'text-text-body w-7',
     'border-border-light border-solid first-of-type:border-r',
     'border-border-light border-solid last-of-type:border-l ',
     'data-[disabled]:text-text-disabled',
diff --git a/themes/theme-b2b/src/components/Slider.styles.ts b/themes/theme-b2b/src/components/Slider.styles.ts
index 04e1c9e6f..1b8c9c83f 100644
--- a/themes/theme-b2b/src/components/Slider.styles.ts
+++ b/themes/theme-b2b/src/components/Slider.styles.ts
@@ -13,6 +13,6 @@ export const Slider: ThemeComponent<'Slider'> = {
     'data-[focus]:border-border-focus',
     'data-[disabled]:bg-bg-disabled data-[disabled]:border-border-disabled',
   ]),
-  label: cva('text-text-primary text-base font-normal'),
-  output: cva('text-text-primary text-base font-normal'),
+  label: cva('text-text-body text-base font-normal'),
+  output: cva('text-text-body text-base font-normal'),
 };
diff --git a/themes/theme-b2b/src/components/Table.styles.ts b/themes/theme-b2b/src/components/Table.styles.ts
index 6a8cb1ac1..3d44a1a65 100644
--- a/themes/theme-b2b/src/components/Table.styles.ts
+++ b/themes/theme-b2b/src/components/Table.styles.ts
@@ -5,7 +5,7 @@ export const Table: ThemeComponent<'Table'> = {
   header: cva(
     [
       'cursor-default border-b-[1px] p-4 text-left',
-      'text-text-primary border-border-light',
+      'text-text-body border-border-light',
       'focus:outline-outline-focus',
     ],
     {
@@ -24,7 +24,7 @@ export const Table: ThemeComponent<'Table'> = {
   ]),
   cell: cva(
     [
-      'text-text-primary border-border-light border-b-[1px] p-4',
+      'text-text-body border-border-light border-b-[1px] p-4',
       'focus:outline-outline-focus',
     ],
     {
diff --git a/themes/theme-b2b/src/components/Tabs.styles.ts b/themes/theme-b2b/src/components/Tabs.styles.ts
index 70e73d160..cba495cd9 100644
--- a/themes/theme-b2b/src/components/Tabs.styles.ts
+++ b/themes/theme-b2b/src/components/Tabs.styles.ts
@@ -5,7 +5,7 @@ export const Tabs: ThemeComponent<'Tabs'> = {
   tab: cva(
     [
       'min-h-[40px]',
-      'data-[hover]:text-text-primary data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid',
+      'data-[hover]:text-text-body data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid',
       'aria-disabled:text-text-disabled ',
       'aria-selected:border-b-border-focus aria-selected:border-b-8 aria-selected:border-solid',
     ],
diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts
index 9e5e213df..c25adeba6 100644
--- a/themes/theme-b2b/src/components/TextArea.styles.ts
+++ b/themes/theme-b2b/src/components/TextArea.styles.ts
@@ -1,10 +1,11 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const TextArea: ThemeComponent<'TextArea'> = cva([
-  'text-text-primary font-body leading-8',
+  'text-text-body font-body leading-8',
   'border-border-light rounded-sm border outline-none',
   'px-2 py-0',
   'hover:border-border-hover',
+  'read-only:focus:border-border-light read-only:focus:shadow-none',
   'focus:border-border-focus focus:shadow-[0_0_0_1px_#fa8005]',
   'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed',
   'group-error/field:border-border-error group-error/field:shadow-[0_0_0_1px_#dd4142]',
diff --git a/themes/theme-b2b/src/root.ts b/themes/theme-b2b/src/root.ts
index 6187c8e12..3e575b0b2 100644
--- a/themes/theme-b2b/src/root.ts
+++ b/themes/theme-b2b/src/root.ts
@@ -1,4 +1,4 @@
 import { Theme, cva } from '@marigold/system';
 export const root: Theme['root'] = cva(
-  'font-body text-text-primary bg-bg-body m-0 p-0'
+  'font-body text-text-body bg-bg-body m-0 p-0'
 );
diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts
index 43a1f1908..c307415ae 100644
--- a/themes/theme-b2b/src/tokens.ts
+++ b/themes/theme-b2b/src/tokens.ts
@@ -92,10 +92,11 @@ export const colors = {
   // Text
   // ---------------
   text: {
-    primary: {
+    body: {
       DEFAULT: brand.secondary[700],
-      light: brand.secondary[500],
+      accent: brand.secondary[500],
     },
+
     link: brand.blue[400],
 
     light: brand.secondary[100],
@@ -135,7 +136,7 @@ export const colors = {
        * Use this when you need to separate a specific layer from
        * the surface color, e.g. table headers.
        */
-      raised: brand.secondary[500],
+      raised: brand.secondary[400],
       /**
        * Use this when you need to make a specific layer
        * to appear lower than the surface color, e.g. progress bar.
@@ -148,7 +149,7 @@ export const colors = {
     // State
     disabled: brand.secondary[200],
     hover: { DEFAULT: brand.secondary[400], light: brand.secondary[200] },
-    focus: brand.primary[200],
+    focus: brand.secondary[200],
     selected: {
       DEFAULT: brand.primary[100],
       input: brand.primary[600],


Test patch:
diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx
index c9f5ebfcf..ae49d4a50 100644
--- a/packages/components/src/Text/Text.test.tsx
+++ b/packages/components/src/Text/Text.test.tsx
@@ -6,13 +6,13 @@ import { Text } from './Text';
 const theme: Theme = {
   name: 'test',
   colors: {
-    emerald: 'rgb(5 150 105);',
+    emerald: 'rgb(5 150 105)',
   },
   components: {
-    Text: cva("font-['Oswald_Regular']", {
+    Text: cva('font-["Oswald_Regular"]', {
       variants: {
         variant: {
-          one: 'font-["Arial]"',
+          one: 'font-["Arial"]',
         },
       },
     }),
@@ -26,7 +26,7 @@ test('uses base as default variant', () => {
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
-  expect(text).toHaveClass(`font-['Oswald_Regular']`);
+  expect(text).toHaveClass(`font-["Oswald_Regular"]`);
 });
 
 test('uses theme styles', () => {
@@ -38,7 +38,7 @@ test('uses theme styles', () => {
   const text = screen.getByText(/text/);
 
   expect(text.className).toMatchInlineSnapshot(
-    `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"`
+    `"font-["Arial"] text-[--color] outline-[--outline]"`
   );
 });
 
@@ -64,8 +64,9 @@ test('style props override theme styles', () => {
   const text = screen.getByText(/text/);
 
   expect(text.className).toMatchInlineSnapshot(
-    `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"`
+    `"font-["Arial"] text-[--color] outline-[--outline]"`
   );
+  expect(text.style.cssText).toMatchInlineSnapshot(`"--color: red-700;"`);
 });
 
 test('get theme color', () => {
@@ -78,9 +79,9 @@ test('get theme color', () => {
   const text = screen.getByTestId('text');
   expect(text).toMatchInlineSnapshot(`
     <p
-      class="font-['Oswald_Regular'] text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"
+      class="font-["Oswald_Regular"] text-[--color] outline-[--outline]"
       data-testid="text"
-      style="--color: rgb(5 150 105);;"
+      style="--color: rgb(5 150 105);"
     />
   `);
 });