Front-end theme style implementation method, device and equipment

Abstract

The embodiment of the invention discloses a front-end theme style implementation method, device and equipment. According to the scheme, the method comprises the steps of obtaining a subject configuration object, and determining a corresponding static CSS variable name according to a corresponding CSS variable of the subject configuration object; based on the static CSS variable name, establishing a mapping relationship between the CSS variable set and the theme configuration object, and generating a design token set corresponding to the theme configuration object; performing pattern isolation on the CSS variable set through a random number selector; a front-end theme style is generated by designing a token set.

Description

Technical Field

[0001] This manual relates to the field of computer technology, and in particular to methods, apparatus and devices for implementing front-end theme styles. Background Technology

[0002] As front-end development becomes increasingly complex, component-based development models have gradually become mainstream. Therefore, foundational component libraries serving front-end development have become crucial. These libraries not only need to provide a rich set of pre-built components but also need to have style customization capabilities to meet the branding and personalization needs of different products or business lines.

[0003] In terms of style solution technology selection, there has been a gradual evolution from traditional preprocessors (such as Less and Sass) and atomic CSS frameworks (such as Tailwind CSS and Windi CSS) to CSS-in-JS technology. CSS-in-JS, short for CSS-in-JavaScript, is a technique that embeds Cascading Style Sheets (CSS) into JavaScript code, enabling dynamic generation of style rules at runtime. Besides CSS-in-JS, directly manipulating the CSS Object Model (CSSOM) and atomic CSS frameworks can also achieve dynamic style rule generation to some extent.

[0004] Taking the CSS-in-JS solution as an example, due to its highly dynamic styles, changes in theme or component rendering require the JavaScript engine to calculate and serialize the corresponding style rules in real time and inject them into the document. As the application scales and usage time increases, the computational overhead required for calculation, serialization, and injection also increases. In complex scenarios requiring frequent theme switching or pages containing a large number of components, the computational overhead will increase further.

[0005] Therefore, a solution is needed to reduce computational overhead for dynamic themes in the front-end component library. Summary of the Invention

[0006] This specification provides one or more embodiments of a front-end theme style implementation method, apparatus, device, and storage medium to solve the following technical problem: an implementation scheme to reduce computational overhead for dynamic themes in front-end component libraries.

[0007] To solve the above-mentioned technical problems, one or more embodiments of this specification are implemented as follows: This specification provides one or more embodiments of a front-end theme style implementation method, including: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the aforementioned design token set. This specification provides one or more embodiments of a front-end theme style implementation device, comprising: The variable name generation module obtains the theme configuration object and determines the corresponding static CSS variable name based on its corresponding CSS variable. The variable mapping module establishes a mapping relationship between the CSS variable set and the theme configuration object based on the static CSS variable names, and generates a set of design tokens corresponding to the theme configuration object; The style isolation module isolates the styles of the CSS variable set using a random number selector; The style generation module generates front-end theme styles using the design token set.

[0008] This specification provides one or more embodiments of a front-end theme style implementation device, comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the aforementioned design token set. This specification provides one or more embodiments of a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the aforementioned design token set. The above-described at least one technical solution adopted in one or more embodiments of this specification can achieve the following beneficial effects: By replacing specific style values ​​with references to static CSS variable names, the structure of the style rules themselves is fixed as static templates that only reference CSS variables, while dynamism is transferred to the definition layer of CSS variables. This architecture avoids the huge runtime overhead caused by the traditional CSS-in-JS solution, which requires re-serializing and injecting a large number of CSS rules every time the theme changes, thereby reducing the runtime overhead of style generation and achieving performance improvements.

[0009] While retaining the advanced features of CSS-in-JS technology, such as dynamic theme modification, nesting, and coexistence, it achieves runtime performance close to native CSS. In large-scale application scenarios involving complex theme nesting and frequent theme switching, the performance improvement is significant, resolving the contradiction between dynamic style capabilities and runtime performance. Attached Figure Description

[0010] To more clearly illustrate the technical solutions in the embodiments or prior art of this specification, the drawings used in the description of the embodiments or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0011] Figure 1 A flowchart illustrating a front-end theme style implementation method provided in one or more embodiments of this specification; Figure 2 A flowchart illustrating the implementation method of front-end theme style in a conventional solution, provided for one or more embodiments of this specification. Figure 3 A flowchart of the access SOP for one or more embodiments of this specification in an application scenario; Figure 4 A schematic diagram of a front-end theme style implementation device provided for one or more embodiments of this specification; Figure 5 This is a structural diagram of a front-end theme style implementation device provided for one or more embodiments of this specification. Detailed Implementation

[0012] This specification provides a method, apparatus, device, and storage medium for implementing front-end theme styles.

[0013] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this application.

[0014] Figure 1 This diagram illustrates a method for implementing a front-end theme style according to one or more embodiments of this specification. This method can be applied to different business domains, such as front-end development, internet finance, e-commerce, instant messaging, gaming, and government services. The process can be executed by computing devices in the corresponding domain (e.g., a development system server or smart mobile terminal for front-end development). Certain input parameters or intermediate results in the process can be manually adjusted to help improve accuracy.

[0015] To address the need for reduced computational overhead in dynamic themes within front-end component libraries, this paper proposes a solution that utilizes CSS Custom Properties combined with CSS Modules—techniques closer to native browser functionality. CSS Custom Properties, a built-in variable definition mechanism in CSS, allows developers to define reusable values ​​in stylesheets and reference them throughout the document. The basic idea is to predefine and extensively use CSS variables as style values ​​within component styles, and then modify the global CSS variable assignments through a unified entry point to achieve theme switching.

[0016] This approach leverages the browser's native support for CSS variables, shifting the burden of style calculation from the JavaScript runtime to the browser engine, thus improving runtime performance while retaining a degree of flexibility in component styles.

[0017] However, this approach based on global CSS variables still has some shortcomings. First, it degenerates the theme system from a nested, isolated architecture to a globally unique pattern. Because CSS variables rely on their cascading nature within the DOM structure, globally defined variables affect all components, making it difficult to achieve local theme customization within the same page (e.g., applying different themes to different areas). Second, to achieve finer-grained style overriding at the component level, variable assignments usually need to be inlined into the component's HTML elements. This results in a large number of style attributes in the generated HTML markup, causing document bloat, code redundancy, and hindering style reuse and maintenance.

[0018] Based on this, the following was proposed: Figure 1 The front-end theme style implementation method shown is as follows: Figure 1 The process may include the following steps: S102: Obtain the theme configuration object and determine the corresponding static CSS variable name based on its corresponding CSS variable.

[0019] The Theme Object is the core design token container in the CSS-in-JS architecture. It encapsulates the application's visual design properties through a key-value pair data structure, enabling centralized management of style concerns. As the runtime representation of the design system, the Theme Object provides a unified style data source for components, ensuring visual consistency and supporting dynamic theme switching. The Theme Object can originate from the enterprise's own design system, project requirements, or front-end component libraries (such as CSS-in-JS libraries and UI component libraries).

[0020] In CSS-in-JS, front-end theme styles (used to represent the visual foundation of front-end pages) are centrally managed through a theme configuration object. This object defines a set of reusable design tokens, such as primary color, error colors, fonts, spacing, and corner radius. All front-end page components uniformly retrieve style values ​​from the theme configuration object, ensuring a consistent design style across the entire front-end page.

[0021] Retrieve the theme configuration object and determine its CSS variables. The theme configuration object initially contains several CSS variables, which are key-value pairs. In a CSS variable, the key is a descriptive name representing its purpose; the value is the specific content of the CSS variable. For example, CSS variables can be: "colorPrimary:#1677ff" and "colorError:#ff4d4f". "colorPrimary:#1677ff" indicates that the primary color is "#1677ff" (a color representation corresponding to a shade of blue), and "colorError:#ff4d4f" indicates that the error state color is "#ff4d4f" (corresponding to a shade of red).

[0022] For example, when a button needs to display its main function, its background color is usually not set to a fixed blue value. Instead, it references `colorPrimary` in the theme object. Thus, if the product brand color needs to be changed from blue to purple in the future, simply change `#1677ff` to purple in the theme configuration object. Then, buttons, links, icons, etc., that use the primary color on the front-end page will automatically change from blue to purple, without needing to modify them individually.

[0023] Of course, in addition to color-related content, CSS variables can also define numbers (such as spacing and font size), strings (such as font names), shadows, and so on.

[0024] CSS variables, also known as CSS custom properties, are a dynamic value storage mechanism defined in the CSS specification that features cascading and inheritance. They are declared using the custom property symbol (--*) and referenced through the corresponding function (var()), enabling runtime dynamic calculations based on CSS preprocessed variables.

[0025] In the embodiments of this application, the representation of CSS variables may differ in different scenarios. For example, taking the primary color as an example, its representation in the theme configuration object is "colorPrimary:#1677ff". This representation is directly input by the user or the design system. However, in subsequent processing, in order to facilitate system reading and data format uniformity, its representation can be changed to "--color-Primary:#1677ff". In the subsequent generation of design tokens, it may also be necessary to add corresponding functions such as var() to represent it.

[0026] The corresponding static CSS variable name is obtained based on the key of the key-value pair corresponding to the CSS variable. In this embodiment, the key of the key-value pair corresponding to the CSS variable is referred to as the CSS variable name. Since the CSS variable name has a fixed value and does not change at the current moment and in subsequent data processing, it is called a static CSS variable name.

[0027] In addition, the CSS variables in the theme configuration object can be entirely input by the developers or the design system, or only some basic CSS variables can be input by the developers or the design system, and the corresponding CSS variables can be automatically derived.

[0028] S104: Based on the static CSS variable names, establish a mapping relationship between the CSS variable set and the theme configuration object, and generate a set of design tokens corresponding to the theme configuration object.

[0029] Figure 2 This is a flowchart illustrating the implementation method of a front-end theme style in a conventional solution, provided for one or more embodiments of this specification. In a conventional solution, after obtaining the theme configuration object, a design token is usually generated directly based on the CSS variables in its corresponding CSS variable set. In this case, the key in the key-value pair corresponding to the design token is the key of the corresponding CSS variable, and the value is also the value of the corresponding CSS variable.

[0030] However, in this mode, when it is necessary to switch the front-end theme style, the entire theme configuration object needs to be reserialized into complete CSS text, which involves a large amount of computing resources.

[0031] Figure 3 This is a flowchart illustrating the front-end theme style implementation method provided in one or more embodiments of this specification. An initial design token set is created based on the CSS variable set; wherein the CSS variable set includes multiple CSS variables. At this point, the key and value of each design token's key-value pair in this initial design token set are consistent with those in traditional design token schemes.

[0032] The values ​​of each key-value pair in the design token set are adjusted to references to the corresponding static CSS variable names, establishing a mapping relationship between the CSS variable set and the theme configuration object, and generating a design token set corresponding to the theme configuration object. To address the issue of excessive computational resource consumption during front-end theme style switching in traditional solutions, the values ​​of each key-value pair in the design token set (i.e., the key-value pair of each design token) are no longer dynamically assigned specific values ​​(e.g., #1677ff mentioned above), but are instead adjusted to references to fixed static CSS variable names. This establishes a mapping relationship between the CSS variable set and the theme configuration object, which can be simply referred to as CSS Variable Mapping.

[0033] By using CSS variable mapping, design tokens are no longer directly populated with specific dynamic values. Instead, the values ​​of each design token are mapped to corresponding CSS variable names, and these static CSS variable names then populate the design token values. In this way, since the static CSS variable names are fixed values ​​and do not change, the system's calculations related to the title configuration object remain constant. This results in a stable HTML document. When switching title configuration objects, only the values ​​of the corresponding CSS variables need to be replaced, eliminating the need for a lengthy serialization process.

[0034] After the CSS variable mapping, the resulting set of adjusted design tokens is the set of design tokens used subsequently in this embodiment. For example, taking the primary color as an example, in the original scheme, its corresponding design token could be "colorPrimary:#1677ff", while in the adjusted design token, it can be "colorPrimary:var(--color-Primary)", no longer containing dynamic values ​​such as #1677ff.

[0035] S106: Use a random number selector to isolate styles from the set of CSS variables.

[0036] like Figure 2 As shown, in the traditional approach, the design token needs to be hashed to serve as an identifier, which is then added to the corresponding selector to generate the front-end theme styles. The reason for using hashing in the traditional approach is to implement style isolation and caching for the CSS variable collection. Since the key-value pairs of the design token contain actual values, hashing can generate a unique hash value for each theme configuration object, serving as its corresponding identifier.

[0037] However, in this embodiment, the value of the key-value pair corresponding to the design token is replaced with a static CSS variable name. At this time, the key in the key-value pair corresponding to the design token (corresponding to the key describing each CSS variable) is fixed, and the value of the key-value pair (corresponding to the static CSS variable name) is also fixed. Even if the theme configuration object changes, the final front-end theme style will not change. Only the relevant values ​​in the CSS variable set will change. At this time, the performance consumption caused by serializing CSS has been reduced.

[0038] Furthermore, at this point, there is no need to use high-cost algorithms like hash algorithms; instead, algorithms with lower computational costs can be used to generate identifiers.

[0039] Specifically, a random identifier generator is used instead of a hash algorithm to generate a unique identifier for the topic configuration object. The random identifier generator is a tool or program used to create unique, random strings. Its core function is to assign a unique identifier to the object (in this embodiment, it mainly refers to the design token set). For example, it can use the `useId` method provided by React (a JavaScript library used to build user interfaces).

[0040] A random number selector is generated based on a unique identifier, and then an independent scope corresponding to the CSS variable set is generated through the random number selector, thus isolating the styles of the CSS variable set.

[0041] If a random number selector is not set and the CSS variable collection is defined directly in the global scope (e.g., :root), then all theme configuration objects will share the same set of variable values, making it difficult to achieve theme isolation, and only one front-end theme style can exist in the front-end page.

[0042] Therefore, by generating a random number selector using a unique identifier and constraining the set of CSS variables to that selector, the set of CSS variables can be made to apply only to the current front-end theme styles. Alternatively, CSS variables can be generated in real-time using the theme configuration object, directly converting the design token of the current theme configuration object into CSS variables to generate the front-end theme styles.

[0043] Furthermore, the use of a random number selector eliminates the need for hash algorithms in the entire data processing, further reducing the consumption of computing resources.

[0044] S108: Generate a front-end theme style using the design token set.

[0045] like Figure 3As shown above, a mapping relationship between the theme configuration object and the CSS variable set has been established, and a corresponding design token set has been generated, reducing the consumption of computing resources required during serialization. Furthermore, by using a random number selector to isolate the CSS variable set, the correct reference to the CSS variable set can be achieved while further reducing the consumption of computing resources.

[0046] At this point, the front-end theme style can be generated, which is used to generate the visual effects of the front-end page.

[0047] Specifically, static front-end theme rules are generated based on the key-value pairs corresponding to CSS variables, and front-end theme styles are generated using these static front-end theme rules. Static front-end theme rules refer to adjusting the key-value pairs corresponding to CSS variables using a preset, fixed format. Since the values ​​in the design tokens are fixed, the front-end theme rules are also fixed and unchanging, hence the name "static front-end theme rules." For example, taking the primary color as an example, its corresponding static front-end theme rule could be ".xxx-xxx{color:bar(--color-Primary)}", where ".xxx-xxx" refers to the project name corresponding to the front-end page.

[0048] If the front-end theme style is determined to change, the static front-end theme rules remain unchanged, and the CSS variable set is dynamically adjusted adaptively. When the front-end theme style changes, there is no need to perform a series of calculations and modifications as in traditional solutions, such as design tokens, serialization, hash calculation, and front-end theme rules. Only the values ​​of the CSS variable set under the corresponding random number selector need to be adjusted. Based on the established mapping relationship, the adjusted CSS variable set is selected according to the guidance in the static front-end theme rules, thereby achieving adaptive adjustment of the front-end theme style.

[0049] By replacing specific style values ​​with references to static CSS variable names, the structure of the style rules themselves is fixed as static templates that only reference CSS variables, while dynamism is transferred to the definition layer of CSS variables. This architecture avoids the huge runtime overhead caused by the traditional CSS-in-JS solution, which requires re-serializing and injecting a large number of CSS rules every time the theme changes, thereby reducing the runtime overhead of style generation and achieving performance improvements.

[0050] While retaining the advanced features of CSS-in-JS technology, such as dynamic theme modification, nesting, and coexistence, it achieves runtime performance close to native CSS. In large-scale application scenarios involving complex theme nesting and frequent theme switching, the performance improvement is significant, resolving the contradiction between dynamic style capabilities and runtime performance.

[0051] In one or more embodiments of this specification, as the content of the front-end page increases and the business requirements become more complex, the settings of the theme configuration object may also become more complex. Alternatively, when multiple users use the system to configure the theme configuration object at the same time, the number of design tokens that the system needs to process at the same time will also increase.

[0052] Based on this, it is determined that the number of design tokens in the design token set exceeds a preset threshold. This number of design tokens can be either the number of design tokens in the current user's theme configuration object, or the sum of the number of design tokens in all theme configuration objects processed by all users in the system at the same time.

[0053] Based on the historical change frequency and semantics of the design tokens, multiple design tokens with historical change frequencies lower than a preset frequency and semantic similarity higher than a preset level are identified. The historical change frequency can be the frequency corresponding to the number of times the user adjusts the current theme configuration object; furthermore, since the naming rules are generally consistent across the same system, the average number of adjustments made to the theme configuration object within a recent historical period can also be used to obtain a more accurate change frequency. Token semantics refers to the semantic meaning represented by the keys in its key-value pairs, and the similarity between the semantics of different design tokens can be determined using preset rules.

[0054] Multiple design tokens can be merged. Design tokens with low change frequency are generally considered to have a lower impact on the overall visual presentation and are therefore considered to be of lower importance. Tokens with similar semantic levels can be merged, as the merged tokens have a lower impact on the overall design. The keys and values ​​of the merged design tokens can be determined through various methods such as random selection or averaging.

[0055] In one or more embodiments of this specification, as the theme configuration object becomes more complex, the number of CSS variables also increases, which may consume more time when users edit the theme configuration pair.

[0056] Based on this, for each individual CSS variable in the CSS variable set, its corresponding variable type is determined. Here, CSS variables are mainly set to two types: one is theme style, which is closely related to the overall visual presentation of the theme, such as theme color, global font, component spacing, etc.; the other is component dynamic style, which only affects the presentation of a single component (such as a single button, a single text, a single image, etc.).

[0057] At this point, for CSS variables whose variable type is component dynamic style, if the number of corresponding options is limited, a set of commonly used CSS variables is generated based on at least one historical selection record of that CSS variable in the historical front-end theme styles. Here, "limited number of options" means that due to objective constraints of the component or business requirements, some CSS variable values ​​can only be selected from a limited set of values. For example, regarding objective constraints, the number of options for button shapes is limited, and they cannot be drawn manually; regarding business requirements, to maintain the uniformity of the overall image, the number of options for the size of the image component only includes three choices: large, medium, and small, rather than allowing users to set the size value themselves.

[0058] At this point, based on the selection probabilities for different front-end business scenarios in the historical selection records, the combination of several CSS variables with the highest selection probabilities is obtained, and a set of commonly used CSS variables is generated.

[0059] Based on a collection of commonly used CSS variables, preset CSS classes are generated and added to the global scope. The corresponding front-end theme styles are then displayed to the user. When a user sets up a theme configuration object, the system can retrieve the current front-end business logic and its corresponding preset CSS class. Simultaneously, the front-end theme styles corresponding to these preset CSS classes are displayed to the user. If the user approves of the styles, they can directly select and reuse the CSS variables corresponding to these preset CSS classes without needing to manually edit them.

[0060] In one or more embodiments of this specification, when a user is designing a front-end page, if they do not have a suitable design idea initially, they can find inspiration by combining elements from historical theme configuration objects. Alternatively, when there is a clear business relationship between the current front-end page and previously designed front-end pages, the current front-end page can also be designed by combining elements from historical theme configuration objects.

[0061] Specifically, the current theme configuration object is determined by combining multiple historical theme configuration objects. These historical theme configuration objects may be designed by the same or different users as the current theme configuration object, and they may correspond to the design of one or different front-end pages.

[0062] For example, based on the user's selection, multiple corresponding historical topic configuration objects can be determined. The selection of these historical topic configuration objects can be based on the front-end business currently being performed by the user, such as recommending historical topic configuration objects belonging to the same or similar front-end business.

[0063] Based on the user's scope selection or semantic description, at least a portion of CSS variables are selected from multiple historical theme configuration objects and combined to obtain the current theme configuration object. Scope selection means the user explicitly specifies which CSS variables from the historical theme configuration objects will be used this time. Semantic description, on the other hand, is the user's description in natural language of which types of CSS variables they want to use. For example, the user's semantic description could be, "Use the main color of a specified historical theme configuration object."

[0064] Furthermore, for a single historical theme configuration object, based on its corresponding scope selection or semantic description, a corresponding subset is selected from its own set of CSS variables. For scope selection, the user directly selects specific CSS variables, thus ensuring a precise scope for the subset. Semantic descriptions, on the other hand, allow the selection of several most relevant CSS variables to form a subset. For example, if the user's semantic description is a primary color, the subset, in addition to `colorPrimary`, could also include CSS variables such as `colorPrimaryHover` and `colorPrimaryFocus`.

[0065] By combining the CSS variables in the subsets, we obtain the set of CSS variables corresponding to the current theme configuration object. By combining the subsets selected from each historical theme configuration object, we can obtain all the CSS variables corresponding to the theme configuration object, thus forming the corresponding set of CSS variables.

[0066] Based on the user's range selection or semantic description, the base historical theme configuration object is determined from the multiple selected historical theme configuration objects. If the user explicitly specifies a historical theme configuration object, it can be directly used as the base historical theme configuration object. If not specified, the base historical theme configuration object can be selected based on the user's range selection or semantic description. For example, the historical theme configuration object corresponding to the main color can be selected as the base historical theme configuration object.

[0067] Visual consistency verification is performed on the CSS variable set, using the CSS variable values ​​corresponding to the base historical theme configuration object as the standard. Since the current theme configuration object is composed of multiple historical theme configuration objects, consistency issues may arise, thus requiring consistency verification.

[0068] Consistency verification can include dimensions such as color, spacing ratio, font hierarchy, and component style uniformity. For example, it can check for unreasonable color combinations or unreasonable spacing ratios. Once a consistency issue is found, the CSS variable values ​​of the currently selected base historical theme configuration object are kept unchanged. Then, the CSS variable values ​​of other historical theme configuration objects are adjusted to ensure overall visual consistency.

[0069] Next, the historical theme configuration object to which the CSS variables of each key-value pair in the design token set belong is determined, and the values ​​of each key-value pair in the design token set are adjusted to references to the corresponding static CSS variable names in that historical theme configuration object. This completes the referencing of each static CSS variable name after this combination, facilitating subsequent front-end theme style generation.

[0070] Based on the same idea, one or more embodiments of this specification also provide apparatus and devices corresponding to the above methods, such as... Figure 4 , Figure 5 As shown.

[0071] Figure 4 This specification provides a structural diagram of a front-end theme style implementation device according to one or more embodiments, the device comprising: The variable name generation module 402 obtains the theme configuration object and determines the corresponding static CSS variable name based on its corresponding CSS variable. The variable mapping module 404 establishes a mapping relationship between the CSS variable set and the theme configuration object based on the static CSS variable names, and generates a set of design tokens corresponding to the theme configuration object; The style isolation module 406 isolates the styles of the CSS variable set using a random number selector; The style generation module 408 generates front-end theme styles using the design token set.

[0072] Optionally, the variable name generation module 402 obtains the theme configuration object and determines the CSS variables contained therein; Based on the key of the key-value pair corresponding to the CSS variable, obtain the corresponding static CSS variable name.

[0073] Optionally, the variable mapping module 404 creates an initial set of design tokens based on the CSS variable set; wherein the CSS variable set includes multiple CSS variables; The values ​​of each key-value pair in the design token set are adjusted to references of the corresponding static CSS variable names, establishing a mapping relationship between the CSS variable set and the theme configuration object, and generating the design token set corresponding to the theme configuration object.

[0074] Optionally, the style isolation module 406 generates a unique identifier corresponding to the theme configuration object by replacing the hash algorithm with a random identifier generator; A random number selector is generated based on the unique identifier, and an independent scope corresponding to the CSS variable set is generated through the random number selector to isolate the styles of the CSS variable set.

[0075] Optionally, the style generation module 408 generates static front-end theme rules based on the key-value pairs corresponding to the CSS variables, and generates front-end theme styles through the static front-end theme rules; If it is determined that the front-end theme style has been changed, the static front-end theme rules remain unchanged, and the CSS variable set is dynamically adjusted adaptively.

[0076] Optionally, the device further includes a design token merging module 410; The design token merging module determines that the number of design tokens in the design token set exceeds a preset threshold. Based on the historical change frequency and semantics of the design tokens, multiple design tokens with historical change frequencies lower than a preset frequency and semantic similarity higher than a preset level are identified. The multiple design tokens are merged.

[0077] Optionally, the device further includes a variable pre-generation module 412; The variable pre-generation module determines the corresponding variable type for a single CSS variable in the CSS variable set; For CSS variables whose variable type is component dynamic style, if the number of corresponding selection options is limited, a set of commonly used CSS variables is generated based on at least one historical selection record of the CSS variable in the historical front-end theme style. Based on the set of commonly used CSS variables, a preset CSS class is generated, added to the global scope, and the front-end theme style corresponding to the preset CSS class is displayed to the user.

[0078] Optionally, the variable mapping module 404 determines the current topic configuration object, which is obtained by combining multiple historical topic configuration objects; Determine the historical theme configuration object to which the CSS variables of each key-value pair in the design token set belong, and adjust the value of each key-value pair in the design token set to a reference to the corresponding static CSS variable name in the historical theme configuration object.

[0079] Optionally, the variable mapping module 404 determines multiple corresponding historical topic configuration objects based on the user's selection; Based on the user's range selection or semantic description, at least some CSS variables are selected from the multiple historical theme configuration objects and combined to obtain the current theme configuration object.

[0080] Optionally, the variable mapping module 404, for a single historical theme configuration object, selects a corresponding subset from its corresponding CSS variable set based on its corresponding range selection or semantic description; The CSS variables in the subset are combined to obtain the set of CSS variables corresponding to the current theme configuration object; Based on the user's range selection or semantic description, determine the basic historical topic configuration object from the selected multiple historical topic configuration objects; Using the CSS variable values ​​corresponding to the basic historical theme configuration object as the standard, visual consistency verification is performed on the CSS variable set.

[0081] Figure 5 This specification provides a schematic diagram of the structure of an open capability access device for a service platform, as shown in one or more embodiments. The device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the set of design tokens.

[0082] Based on the same idea, one or more embodiments of this specification also provide a non-volatile computer storage medium corresponding to the above method, storing computer-executable instructions, wherein the computer-executable instructions are configured as follows: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the set of design tokens.

[0083] In the 1990s, improvements to a technology could be clearly distinguished as either hardware improvements (e.g., improvements to the circuit structure of diodes, transistors, switches, etc.) or software improvements (improvements to the methodology). However, with technological advancements, many methodological improvements today can be considered direct improvements to the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved methodology into the hardware circuit. Therefore, it cannot be said that a methodological improvement cannot be implemented using hardware physical modules. For example, a Programmable Logic Device (PLD) (such as a Field Programmable Gate Array (FPGA)) is such an integrated circuit whose logic function is determined by the user programming the device. Designers can program and "integrate" a digital system onto a PLD themselves, without needing chip manufacturers to design and manufacture dedicated integrated circuit chips. Furthermore, nowadays, instead of manually manufacturing integrated circuit chips, this programming is mostly implemented using "logic compiler" software. Similar to the software compiler used in program development, the original code before compilation must also be written in a specific programming language, called a Hardware Description Language (HDL). There are many HDLs, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, and RHDL (Ruby Hardware Description Language). Currently, the most commonly used are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should also understand that by simply performing some logic programming on the method flow using one of these hardware description languages ​​and programming it into an integrated circuit, the hardware circuit implementing the logical method flow can be easily obtained.

[0084] The controller can be implemented in any suitable manner. For example, it can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicon Labs C8051F320. A memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art will also recognize that, in addition to implementing the controller in purely computer-readable program code form, the same functionality can be achieved by logically programming the method steps to make the controller take the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the means included therein for implementing various functions can also be considered as structures within the hardware component. Alternatively, the means for implementing various functions can be considered as both software modules implementing the method and structures within the hardware component.

[0085] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, a computer can be, for example, a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email device, game console, tablet computer, wearable device, or any combination of these devices.

[0086] For ease of description, the above devices are described in terms of function, divided into various units. Of course, in implementing this specification, the functions of each unit can be implemented in one or more software and / or hardware components.

[0087] Those skilled in the art will understand that the embodiments of this specification can be provided as methods, systems, or computer program products. Therefore, the embodiments of this specification can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the embodiments of this specification can take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0088] This specification is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this specification. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0089] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0090] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0091] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0092] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0093] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0094] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0095] This specification can be described in the general context of computer-executable instructions that are executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a specific task or implement a specific abstract data type. This specification can also be practiced in distributed computing environments, where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0096] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0097] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0098] The above description is merely one or more embodiments of this specification and is not intended to limit this specification. Various modifications and variations can be made to the one or more embodiments of this specification by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principle of one or more embodiments of this specification should be included within the scope of the claims of this specification.

Claims

1. A method for implementing front-end theme styles, comprising: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the set of design tokens.

2. The method as described in claim 1, obtaining the theme configuration object and determining the corresponding static CSS variable name based on its corresponding CSS variable, specifically includes: Obtain the theme configuration object and determine the CSS variables it contains; Based on the key of the key-value pair corresponding to the CSS variable, obtain the corresponding static CSS variable name.

3. The method as described in claim 1, wherein a mapping relationship is established between the CSS variable set and the theme configuration object based on the static CSS variable names, and a design token set corresponding to the theme configuration object is generated, specifically including: An initial set of design tokens is created based on a set of CSS variables; wherein the set of CSS variables includes multiple CSS variables. The values ​​of each key-value pair in the design token set are adjusted to references of the corresponding static CSS variable names, establishing a mapping relationship between the CSS variable set and the theme configuration object, and generating the design token set corresponding to the theme configuration object.

4. The method as described in claim 1, wherein the CSS variable set is style-isolated using a random number selector, specifically includes: A unique identifier corresponding to the topic configuration object is generated by replacing the hash algorithm with a random identifier generator. A random number selector is generated based on the unique identifier, and an independent scope corresponding to the CSS variable set is generated through the random number selector to isolate the styles of the CSS variable set.

5. The method as described in claim 1, wherein generating a front-end theme style using the design token set specifically includes: Based on the key-value pairs corresponding to the CSS variables, static front-end theme rules are generated, and front-end theme styles are generated using the static front-end theme rules. If it is determined that the front-end theme style has been changed, the static front-end theme rules remain unchanged, and the CSS variable set is dynamically adjusted adaptively.

6. The method of claim 1, further comprising: It is determined that the number of design tokens in the design token set exceeds a preset threshold; Based on the historical change frequency and semantics of the design tokens, multiple design tokens with historical change frequencies lower than a preset frequency and semantic similarity higher than a preset level are identified. The multiple design tokens are merged.

7. The method of claim 1, further comprising: For a single CSS variable in the CSS variable set, determine its corresponding variable type; For CSS variables whose variable type is component dynamic style, if the number of corresponding selection options is limited, a set of commonly used CSS variables is generated based on at least one historical selection record of the CSS variable in the historical front-end theme style. Based on the set of commonly used CSS variables, a preset CSS class is generated, added to the global scope, and the front-end theme style corresponding to the preset CSS class is displayed to the user.

8. The method as described in claim 3, wherein adjusting the values ​​of each key-value pair in the design token set to references of the corresponding static CSS variable names, specifically includes: Determine the current theme configuration object, which is obtained by combining multiple historical theme configuration objects; Determine the historical theme configuration object to which the CSS variables of each key-value pair in the design token set belong, and adjust the value of each key-value pair in the design token set to a reference to the corresponding static CSS variable name in the historical theme configuration object.

9. The method as described in claim 8, wherein the current theme configuration object is determined by combining multiple historical theme configuration objects, specifically including: Based on the user's selection, determine the corresponding multiple historical theme configuration objects; Based on the user's range selection or semantic description, at least some CSS variables are selected from the multiple historical theme configuration objects and combined to obtain the current theme configuration object.

10. The method as described in claim 9, wherein, based on the user's range selection or semantic description, at least a portion of CSS variables are selected from the chosen plurality of historical theme configuration objects and combined to obtain the current theme configuration object, specifically including: For a single historical theme configuration object, select the corresponding subset from its corresponding CSS variable set based on its scope selection or semantic description; The CSS variables in the subset are combined to obtain the set of CSS variables corresponding to the current theme configuration object; Based on the user's range selection or semantic description, determine the basic historical topic configuration object from the selected multiple historical topic configuration objects; Using the CSS variable values ​​corresponding to the basic historical theme configuration object as the standard, visual consistency verification is performed on the CSS variable set.

11. A front-end theme style implementation device, comprising: The variable name generation module obtains the theme configuration object and determines the corresponding static CSS variable name based on its corresponding CSS variable. The variable mapping module establishes a mapping relationship between the CSS variable set and the theme configuration object based on the static CSS variable names, and generates a set of design tokens corresponding to the theme configuration object; The style isolation module isolates the styles of the CSS variable set using a random number selector; The style generation module generates front-end theme styles using the design token set.

12. The apparatus of claim 11, wherein the variable name generation module obtains a theme configuration object and determines the CSS variables contained therein; Based on the key of the key-value pair corresponding to the CSS variable, obtain the corresponding static CSS variable name.

13. The apparatus of claim 11, wherein the variable mapping module creates an initial set of design tokens based on the CSS variable set; wherein, The CSS variable set includes multiple CSS variables; The values ​​of each key-value pair in the design token set are adjusted to references of the corresponding static CSS variable names, establishing a mapping relationship between the CSS variable set and the theme configuration object, and generating the design token set corresponding to the theme configuration object.

14. The apparatus of claim 11, wherein the style isolation module generates a unique identifier corresponding to the theme configuration object by replacing the hash algorithm with a random identifier generator; A random number selector is generated based on the unique identifier, and an independent scope corresponding to the CSS variable set is generated through the random number selector to isolate the styles of the CSS variable set.

15. The apparatus of claim 11, wherein the style generation module generates static front-end theme rules based on the key-value pairs corresponding to the CSS variables, and generates front-end theme styles through the static front-end theme rules; If it is determined that the front-end theme style has been changed, the static front-end theme rules remain unchanged, and the CSS variable set is dynamically adjusted adaptively.

16. The apparatus of claim 11, further comprising a design token merging module; The design token merging module determines that the number of design tokens in the design token set exceeds a preset threshold. Based on the historical change frequency and semantics of the design tokens, multiple design tokens with historical change frequencies lower than a preset frequency and semantic similarity higher than a preset level are identified. The multiple design tokens are merged.

17. The apparatus of claim 11, further comprising a variable pre-generation module; The variable pre-generation module determines the corresponding variable type for a single CSS variable in the CSS variable set; For CSS variables whose variable type is component dynamic style, if the number of corresponding selection options is limited, a set of commonly used CSS variables is generated based on at least one historical selection record of the CSS variable in the historical front-end theme style. Based on the set of commonly used CSS variables, a preset CSS class is generated, added to the global scope, and the front-end theme style corresponding to the preset CSS class is displayed to the user.

18. The apparatus of claim 13, wherein the variable mapping module determines the current topic configuration object by combining multiple historical topic configuration objects; Determine the historical theme configuration object to which the CSS variables of each key-value pair in the design token set belong, and adjust the value of each key-value pair in the design token set to a reference to the corresponding static CSS variable name in the historical theme configuration object.

19. The apparatus of claim 18, wherein the variable mapping module determines multiple corresponding historical topic configuration objects based on the user's selection; Based on the user's range selection or semantic description, at least some CSS variables are selected from the multiple historical theme configuration objects and combined to obtain the current theme configuration object.

20. The apparatus of claim 19, wherein the variable mapping module, for a single historical theme configuration object, selects a corresponding subset from its corresponding CSS variable set according to its corresponding range selection or semantic description; The CSS variables in the subset are combined to obtain the set of CSS variables corresponding to the current theme configuration object; Based on the user's range selection or semantic description, determine the basic historical topic configuration object from the selected multiple historical topic configuration objects; Using the CSS variable values ​​corresponding to the basic historical theme configuration object as the standard, visual consistency verification is performed on the CSS variable set.

21. A front-end theme style implementation device, comprising: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Obtain the theme configuration object, and determine the corresponding static CSS variable name based on its corresponding CSS variable; Based on the static CSS variable names, a mapping relationship is established between the CSS variable set and the theme configuration object, and a set of design tokens corresponding to the theme configuration object is generated; The CSS variable set is styled using a random number selector; The front-end theme style is generated using the set of design tokens.

Images