Updated tokens in the theme generator

Author: GomezIvann

website/screens/theme-generator/components/previews/Checkbox.tsx

@@ -12,15 +12,19 @@ const Checkbox = () => {
   return (
     <PreviewContainer>
       <Mode text="Default">
-        <DxcCheckbox checked={checked} label="Checkbox" onChange={onChange} />
+        <DxcCheckbox checked={checked} label="Label text" onChange={onChange} />
       </Mode>
       <Mode text="Label position">
         <DxcCheckbox label="Label before" />
         <DxcCheckbox labelPosition="after" label="Label after" />
       </Mode>
       <Mode text="Disabled">
-        <DxcCheckbox label="Disabled" disabled />
-        <DxcCheckbox label="Disabled Checked" checked disabled />
+        <DxcCheckbox label="Label text" disabled />
+        <DxcCheckbox label="Label text" checked disabled />
+      </Mode>
+      <Mode text="Read-only">
+        <DxcCheckbox label="Label text" readOnly />
+        <DxcCheckbox label="Label text" checked readOnly />
       </Mode>
     </PreviewContainer>
   );

website/screens/theme-generator/components/previews/RadioGroup.tsx

@@ -16,7 +16,7 @@ const single_disabled_options = [
 
 const RadioGroup = () => (
   <PreviewContainer>
-    <Mode text="Default">
+    <Mode text="States">
       <DxcRadioGroup label="Default" defaultValue="A" options={options} />
       <DxcRadioGroup
         label="Error"
@@ -25,10 +25,10 @@ const RadioGroup = () => (
         error="Error message"
       />
       <DxcRadioGroup
-        label="Readonly"
+        label="Read-only"
         defaultValue="A"
         options={options}
-        readonly
+        readOnly
       />
     </Mode>
     <Mode text="Disabled">
@@ -46,7 +46,7 @@ const RadioGroup = () => (
     </Mode>
     <Mode text="Optional">
       <DxcRadioGroup
-        label="Optional"
+        label="Label text"
         helperText="Adds a predefined option whose value is the empty string"
         options={options}
         optional

website/screens/theme-generator/components/previews/TextInput.tsx

@@ -59,24 +59,30 @@ const errorCallbackFunc: (value: string) => Promise<string[]> = (): Promise<
 
 const TextInput = () => (
   <PreviewContainer>
-    <Mode text="Default">
+    <Mode text="States">
       <DxcTextInput
-        label="Label"
+        label="Default"
         clearable
         defaultValue="Example text"
         size="fillParent"
       />
       <DxcTextInput
-        label="Invalid text input"
+        label="Error"
         placeholder="Placeholder"
         error="Error message."
         clearable
         size="fillParent"
       />
+      <DxcTextInput
+        label="Read-only"
+        defaultValue="Example text"
+        readOnly
+        size="fillParent"
+      />
     </Mode>
     <Mode text="Disabled">
       <DxcTextInput
-        label="Disabled text input"
+        label="Label text"
         helperText="Helper text"
         defaultValue="Example text"
         action={action}
@@ -85,7 +91,7 @@ const TextInput = () => (
         size="fillParent"
       />
       <DxcTextInput
-        label="Disabled text input"
+        label="Label text"
         placeholder="Placeholder"
         helperText="Helper text"
         suffix="Suf"
@@ -95,7 +101,7 @@ const TextInput = () => (
     </Mode>
     <Mode text="Action & Optional">
       <DxcTextInput
-        label="Text input with action and optional"
+        label="Label text"
         helperText="Example of helper text"
         placeholder="Placeholder"
         action={action}
@@ -105,7 +111,7 @@ const TextInput = () => (
     </Mode>
     <Mode text="Prefix & Suffix">
       <DxcTextInput
-        label="Prefix and suffix text input"
+        label="Label text"
         prefix="+34"
         suffix="USD"
         helperText="Example of helper text"
@@ -114,14 +120,14 @@ const TextInput = () => (
     </Mode>
     <Mode text="Suggestions">
       <DxcTextInput
-        label="Suggestions text input"
+        label="Label text"
         placeholder="Placeholder"
         suggestions={countries}
         clearable
         size="fillParent"
       />
       <DxcTextInput
-        label="Suggestions error text input"
+        label="Label text"
         placeholder="Placeholder"
         suggestions={errorCallbackFunc}
         clearable

website/screens/theme-generator/components/previews/Textarea.tsx

@@ -7,28 +7,37 @@ const Textarea = () => (
   <PreviewContainer>
     <Mode text="Default">
       <DxcTextarea
-        label="Regular textarea"
+        label="Label text"
         helperText="Example of helper text"
         optional
         verticalGrow="manual"
       />
     </Mode>
     <Mode text="Disabled">
       <DxcTextarea
-        label="Disabled textarea"
+        label="Label text"
         helperText="Example of helper text"
         placeholder="Placeholder"
         disabled
       />
     </Mode>
     <Mode text="Invalid">
       <DxcTextarea
-        label="Invalid textarea"
+        label="Label text"
         helperText="Example of helper text"
         placeholder="Placeholder"
         error="Error message."
       />
     </Mode>
+    <Mode text="Read-only">
+      <DxcTextarea
+        label="Label text"
+        helperText="Example of helper text"
+        defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        placeholder="Placeholder"
+        readOnly
+      />
+    </Mode>
   </PreviewContainer>
 );
 

website/screens/theme-generator/themes/schemas/advanced.schema.json

@@ -197,16 +197,21 @@
     "hoverBackgroundColorCheckedOnDark": "color",
     "disabledBackgroundColorChecked": "color",
     "disabledBackgroundColorCheckedOnDark": "color",
+    "readOnlyBackgroundColorChecked": "color",
+    "hoverReadOnlyBackgroundColorChecked": "color",
     "borderColor": "color",
     "borderColorOnDark": "color",
     "hoverBorderColor": "color",
     "hoverBorderColorOnDark": "color",
     "disabledBorderColor": "color",
     "disabledBorderColorOnDark": "color",
+    "readOnlyBorderColor": "color",
+    "hoverReadOnlyBorderColor": "color",
     "checkColor": "color",
     "checkColorOnDark": "color",
     "disabledCheckColor": "color",
     "disabledCheckColorOnDark": "color",
+    "readOnlyCheckColor": "color",
     "fontFamily": "fFamily",
     "fontSize": "length",
     "fontWeight": "fWeight",
@@ -616,9 +621,9 @@
     "errorRadioInputColor": "color",
     "hoverErrorRadioInputColor": "color",
     "activeErrorRadioInputColor": "color",
-    "readonlyRadioInputColor": "color",
-    "hoverReadonlyRadioInputColor": "color",
-    "activeReadonlyRadioInputColor": "color",
+    "readOnlyRadioInputColor": "color",
+    "hoverReadOnlyRadioInputColor": "color",
+    "activeReadOnlyRadioInputColor": "color",
     "disabledRadioInputColor": "color",
     "disabledLabelFontColor": "color",
     "disabledHelperTextFontColor": "color",
@@ -1000,6 +1005,8 @@
     "disabledBorderColorOnDark": "color",
     "disabledContainerFillColor": "color",
     "disabledContainerFillColorOnDark": "color",
+    "readOnlyBorderColor": "color",
+    "hoverReadOnlyBorderColor": "color",
     "errorBorderColor": "color",
     "errorBorderColorOnDark": "color",
     "hoverErrorBorderColor": "color",
@@ -1049,6 +1056,8 @@
     "disabledBorderColorOnDark": "color",
     "disabledContainerFillColor": "color",
     "disabledContainerFillColorOnDark": "color",
+    "readOnlyBorderColor": "color",
+    "hoverReadOnlyBorderColor": "color",
     "errorBorderColor": "color",
     "errorBorderColorOnDark": "color",
     "hoverErrorBorderColor": "color",