Where in the design studio can I change toggle-row-mode font color?

Rather than playing (working) with the Design Studio, I am going to ask in hopes of getting a documented answer.

In a Table, there is a row action, Toggle Row Mode. It can be used to toggle the row between edit mode and read mode, and this works fine. What doesn’t work is that the text color of the row changes on the toggle back to Read mode. In my case, the row text goes from black to gray.

Where in the Design Studio is this gray color defined so that I can change it?
If it isn’t in the design studio, why does the color change?

Hi Mike,

I couldn’t reproduce this behavior, please double check the following:

  • Have you tried updating the Design Systems?
  • Do you see this in the latest version of Skuid?
  • Is this a standard or customized Design System?

Skuid v15.1.6, Salesforce
Create a new V2 page.
Add a model with the User object
Add a table with this model
Add a field (from All Fields): Alias
Add a Row action: Add the Action Type: Toggle Row Mode
Save and Preview the page
Note the font and color of the aliases displayed
Click a row action button and note the font color again - it should be the same
Click the same row action button again and note the font color - it is a lighter gray
Why did it turn light gray?
How can I change that color?
(Note that there are all default settings on the new page:
The page’s Design Sytem will be “Default”
The model will be NewModel, query on page load, 20 records
The row action will be labeled Run actions
The Alias field is editable text
)

Thanks Mike, I appreciate the detailed feedback! I still can’t reproduce the issue on my test page, looks like I need more information from you:

  1. Have you tried updating the Design Systems? If not, please go ahead, even if you use the Default Design System.
  2. If you inspect the font color on the page preview (e.g. in the Chrome Browser menu → View → Developer → Inspect Elements), which color values do you see?
  3. Does this issue occur on all pages which use the Default Design System?
  4. Do you know if this issue occurs in other orgs of yours as well?

Thanks, Luzie

  1. I updated all Design Systems just now
  2. I’m not sure where to look for font color values. I’m looking at the Elements tab in Chrome Developer Tools. I can right-click one of the displayed aliases and select Inspect. This brings me to the span-tag that includes the alias. I don’t see any font or color info in the html or the Styles box on the right.
  3. I encountered the problem in a custom Design System. I’m testing with Default to eliminate the effect of customization.
  4. Behavior is the same in our Production org.

Here is a screenshot. Note that the alias “aclev” is a lighter gray than the others, as a result of the Toggle Row Mode action:
Screenshot 2022-11-09 7.18.25 PM

Here is my test page XML:

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
	<models>
		<model id="NewModel" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="User">
			<fields>
				<field id="Alias"/>
			</fields>
			<conditions/>
			<actions/>
		</model>
	</models>
	<components>
		<skuid__table allowColumnFreezing="dragDrop" uniqueid="sk-1VLP-10527" mode="read" model="NewModel">
			<fields>
				<field id="Alias"/>
			</fields>
			<filtering enableSearch="false"/>
			<actions/>
			<rowActions>
				<action type="multi" label="Run actions">
					<actions>
						<action type="toggleModeRow"/>
					</actions>
				</action>
			</rowActions>
			<massActions/>
			<exportProperties useTableColumns="true"/>
			<sorting enable="false"/>
		</skuid__table>
	</components>
	<resources>
		<labels/>
		<javascript/>
		<css/>
		<actionsequences/>
	</resources>
	<styles>
		<styleitem type="background" bgtype="none"/>
	</styles>
</skuid__page>

Hi Mike, I was on leave, hence the late reply. Could you resolve the mystery in the meantime? If not, below are a couple of ideas. Thank you very much for the screenshot and the excellent test page, I could use it instantly. However, I could not reproduce the issue, which makes it harder to investigate. The font color is always dark grey (#4a4f5a), also when I toggle the row mode. In the Chrome console Elements tab you should be able to see the fon color in the Styles tab like this:

For further investigation, I recommend to go through the list step by step:

  1. In the row action, if you used Target mode “Edit” or “Read” (instead of “Toggle”), does it make any difference?

  2. Do you happen to know if you had set a custom design system as default design system? This option is no longer available for v2 since the Dubai release (version 15), however it was available in Chicago (see docs) and I’m wondering if it could be related to this. This would only be relevant if you updated this Sandbox from Chicago to Dubai in the past.

  3. Try updating your Chrome browser to the latest release (in case you are not using the latest release), does that make any difference?

  4. Try updating Sandbox to the latest release of Skuid, just to make sure that you are not looking at an old issue. Version 15.2.6 is currently available on our Release page. As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date themes and design systems after you upgrade.


The color value of the table cell is set in the design system as the Functional color “Font Color,” which is defined as a Brand color. The color value does not change after pressing the toggle twice (from read to edit to read). The appearance does change, however, as the text gets lighter.
Compare your posted Style panel in the Elements tab to the same view after toggling back to read. There is a new Class in the enclosing div tag. There is a change to the inherited attributes for the span tag that displays the alias field.
My suspicion is that this is not a problem with the design studio. It is a problem in the table display process.

Note the highlighted class c_6316_5487. Double-click the class attribute in the div tag, and edit the list of classes to remove c_6316_5487. Press Enter, and the text of the alias field is restored to full brightness. It is not a color change; it is some kind of “disabled” attribute that is applied.