feat: release 7

Author: trsergey25

.env.example

@@ -9,4 +9,7 @@ UNIFORM_PREVIEW_SECRET=hello-world
 # defaults to localhost:3000 if not set. 
 #When set, should resolve to the base url of the app. 
 # This is used to generate the sitemap and robots.txt
-BASE_URL=
+BASE_URL=
+
+# Temporarily, you need to provide an NPM token to download the new SDK alpha packages.
+NPM_TOKEN=

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

README.md

@@ -83,6 +83,7 @@ Whenever you add new **colors, dimensions, fonts, or borders**, your application
 
 ```sh
 npm run pull:dex
+npm run apply:dex
 ```
 
 This command is automatically executed when running:
@@ -105,16 +106,10 @@ When modifying an **existing value**, your app will automatically fetch the upda
 
 ## 🎨 Working with Styles
 
-If you prefer managing styles manually, you can modify the predefined configuration files located in the `styles/` directory:
-
-- `styles/border.css`
-- `styles/colors.css`
-- `styles/dimensions.css`
-- `styles/fonts.css`
-
-After making changes, push the updated configuration using:
+If you prefer managing styles manually, you can modify the predefined configuration files `dex.config.json`. After making changes, apply and push the updated configuration using:
 
 ```sh
+npm run apply:dex
 npm run push:dex
 ```
 
@@ -143,16 +138,16 @@ By default, the **Design Extension** includes two predefined groups:
 - `button`
 - `text`
 
-### **Understanding `allowGroups.json`**
+### **Understanding `allowGroups`**
 
-When your project is still using the default configuration, the `allowGroups.json` file will be **empty**. However, if you add a custom group (e.g., `page`), it will be added to this file automatically.
+When your project is still using the default configuration, the `allowGroups` field will be **empty**. However, if you add a custom group (e.g., `page`), it will be added to this field automatically.
 
 #### **Example: Adding a Custom Group (Page)**
 
-If you introduce a new group, such as `page`, the `allowGroups.json` file will be updated as follows:
+If you introduce a new group, such as `page`, the `dex.config.json` file will be updated as follows:
 
 ```json
-{ "color": ["button", "page", "text"] }
+allowedGroups: { "color": ["button", "page", "text"] }
 ```
 
 ### **Creating and Pushing Custom Groups**

content/asset/ca661a4a-fefe-4e01-afab-0892446cc4d2.yaml

@@ -0,0 +1,30 @@
+asset:
+  type: image
+  _id: ca661a4a-fefe-4e01-afab-0892446cc4d2
+  _name: ''
+  fields:
+    title:
+      type: text
+      value: icon-uniform-logo_white.svg
+    file:
+      type: file
+      value: 3c8d25a3-25d5-4898-90a9-336d3523fd06
+    mediaType:
+      value: image/svg+xml
+      type: text
+    url:
+      value: >-
+        https://img.uniform.global/p/bKE8PekcQ3Gk9j6C81jcrQ/iAIoC-kBRq-iFuv2j8zTkw-icon-uniform-logo_white.svg
+      type: text
+    size:
+      value: 2398
+      type: number
+    width:
+      value: 159
+      type: number
+    height:
+      value: 41
+      type: number
+    custom: {}
+created: '2025-07-30T13:07:08.808293+00:00'
+modified: '2025-07-30T13:07:08.808293+00:00'

content/component/accordion.yaml

@@ -7,6 +7,7 @@ parameters:
   - id: displayName
     name: Display Name
     type: text
+    guidance: Used as a display name for the canvas; not rendered in the markup.
     typeConfig: null
     localizable: true
   - id: 9f8178c3-539f-4a1e-8a4e-71bfcedfe223
@@ -23,30 +24,42 @@ parameters:
   - id: backgroundColor
     name: Background Color
     type: dex-color-palette-parameter
+    guidance: Use the Background Color parameter to control component background color.
     typeConfig: null
   - id: spacing
     name: Spacing
     type: dex-space-control-parameter
+    guidance: Use the Spacing parameter to control component margins and padding.
     typeConfig:
       type: dimensions
-      defaultValue:
-        mobile: {}
-        tablet: {}
-        desktop: {}
       withViewPort: true
       selectedGroup: container
   - id: border
     name: Border
     type: dex-token-selector-parameter
+    guidance: Use the Border parameter to control the component border.
     typeConfig:
       selectedTokenType: border
   - id: fluidContent
     name: Fluid Content
     type: checkbox
+    guidance: >-
+      Use the Fluid Content parameter to control the component width.
+
+      This parameter restricts the component within the standard centered
+      container by default, or can enable it to render without restrictions
+      across the full screen width.
     typeConfig: null
   - id: height
     name: Height
     type: dex-segmented-control-parameter
+    guidance: >-
+      Use the Height parameter to control the component height. For example:
+
+      Use the h-screen utility to make an element span the entire height of the
+      viewport
+
+      Use h-full utilities to give an element a 100% height.
     helpText: Parameter for setting the height of an element.
     typeConfig:
       options:
@@ -55,22 +68,6 @@ parameters:
         - key: Screen
           value: screen
       withViewPort: true
-  - id: 855b7e83-5dfc-448c-b9a6-f59060c1637b
-    name: Deprecated
-    type: group
-    typeConfig:
-      collapsed: true
-      childrenParams:
-        - fitHeight
-        - fullHeight
-  - id: fitHeight
-    name: Fit Height (Deprecated)
-    type: checkbox
-    typeConfig: null
-  - id: fullHeight
-    name: Full Height (Deprecated)
-    type: checkbox
-    typeConfig: null
 categoryId: 096fd5ed-5e2a-4bfa-834b-fb805d1d1ce9
 previewImageUrl: >-
   https://res.cloudinary.com/uniform-demos/image/upload/csk-v-next/baseline/preview-images/accordion.jpg
@@ -93,4 +90,4 @@ slots:
 titleParameter: displayName
 canBeComposition: false
 created: '2025-01-29T10:47:00.832869+00:00'
-updated: '2025-06-25T09:40:33.010323+00:00'
+updated: '2025-10-06T21:18:47.956661+00:00'

content/component/accordionItem.yaml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=<https://uniform.app/schemas/json-schema/component-definition/v1.json>
+# yaml-language-server: $schema=https://uniform.app/schemas/json-schema/component-definition/v1.json
 $schema: https://uniform.app/schemas/json-schema/component-definition/v1.json
 id: accordionItem
 name: Accordion Item
@@ -7,11 +7,15 @@ parameters:
   - id: text
     name: Text
     type: text
+    guidance: Use the Text parameter to control the text that will be rendered.
     typeConfig: null
     localizable: true
   - id: tag
     name: HTML Tag
     type: dex-segmented-control-parameter
+    guidance: >-
+      Use the HTML Tag parameter to control the tag with which the text will be
+      rendered.
     typeConfig:
       options:
         - key: H1
@@ -43,6 +47,7 @@ parameters:
   - id: size
     name: Size
     type: dex-segmented-control-parameter
+    guidance: Use the Size parameter to control the font size.
     typeConfig:
       options:
         - key: XS
@@ -67,13 +72,15 @@ parameters:
   - id: color
     name: Color
     type: dex-color-palette-parameter
+    guidance: Use the Color parameter to control the text color.
     typeConfig:
       allowColors: []
       selectedGroup: text
       allowThemeColors: []
   - id: weight
     name: Weight
     type: dex-segmented-control-parameter
+    guidance: Use the Weight parameter to control the font weight.
     typeConfig:
       options:
         - key: Normal
@@ -88,11 +95,13 @@ parameters:
   - id: font
     name: Font
     type: dex-token-selector-parameter
+    guidance: Use the Font parameter to control the font family.
     typeConfig:
       selectedTokenType: font
   - id: transform
     name: Transform
     type: dex-segmented-control-parameter
+    guidance: Use the Transform parameter to control the capitalization of text.
     typeConfig:
       options:
         - key: Uppercase
@@ -104,6 +113,7 @@ parameters:
   - id: decoration
     name: Decoration
     type: dex-segmented-control-parameter
+    guidance: Use the Decoration parameter to change the text decoration thickness.
     typeConfig:
       options:
         - key: Underline
@@ -115,6 +125,7 @@ parameters:
   - id: letterSpacing
     name: Letter Spacing
     type: dex-segmented-control-parameter
+    guidance: Use the Letter Spacing parameter to set the letter spacing.
     typeConfig:
       options:
         - key: Tighter
@@ -128,6 +139,7 @@ parameters:
   - id: alignment
     name: Alignment
     type: dex-segmented-control-parameter
+    guidance: Use the Alignment parameter to align the text.
     typeConfig:
       options:
         - key: Left
@@ -139,16 +151,14 @@ parameters:
   - id: backgroundColor
     name: Background Color
     type: dex-color-palette-parameter
+    guidance: Use the Background Color parameter to control component background color.
     typeConfig: null
   - id: spacing
     name: Spacing
     type: dex-space-control-parameter
+    guidance: Use the Spacing parameter to control component margins and padding.
     typeConfig:
       type: dimensions
-      defaultValue:
-        mobile: {}
-        tablet: {}
-        desktop: {}
       withViewPort: true
       selectedGroup: container
 categoryId: 70d03350-bbf9-457d-abc0-cf7d7aa2a3a4
@@ -165,4 +175,4 @@ slots:
 titleParameter: text
 canBeComposition: false
 created: '2025-01-29T10:47:02.414019+00:00'
-updated: '2025-02-24T18:39:14.248894+00:00'
+updated: '2025-10-06T21:18:50.0874+00:00'

content/component/badge.yaml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=<https://uniform.app/schemas/json-schema/component-definition/v1.json>
+# yaml-language-server: $schema=https://uniform.app/schemas/json-schema/component-definition/v1.json
 $schema: https://uniform.app/schemas/json-schema/component-definition/v1.json
 id: badge
 name: Badge
@@ -7,18 +7,23 @@ parameters:
   - id: text
     name: Text
     type: text
+    guidance: Use the Text parameter to control the text that will be rendered.
     typeConfig: null
     localizable: true
   - id: size
     name: Size
     type: dex-token-selector-parameter
+    guidance: Use the Size parameter to control the size of component.
     typeConfig:
       selectedGroup: badge
       allowDimensions: []
       selectedTokenType: dimension
   - id: pill
     name: Pill
     type: checkbox
+    guidance: >-
+      Use the Pill parameter to give the badge fully rounded corners, creating a
+      smooth pill-like appearance.
     helpText: >-
       When checked, the badge will have fully rounded corners, giving it a
       pill-like appearance
@@ -36,21 +41,25 @@ parameters:
   - id: backgroundColor
     name: Background Color
     type: dex-color-palette-parameter
+    guidance: Use the Background Color parameter to control component background color.
     typeConfig:
       allowColors: []
   - id: textColor
     name: Text Color
     type: dex-color-palette-parameter
+    guidance: Use the Text Color parameter to control the text color.
     typeConfig:
       allowColors: []
       selectedGroup: text
   - id: borderColor
     name: Border Color
     type: dex-color-palette-parameter
+    guidance: Use the Border Color parameter to control the border color.
     typeConfig: null
   - id: dotColor
     name: Dot Color
     type: dex-color-palette-parameter
+    guidance: Use the Dot Color parameter to control the dot color.
     typeConfig: null
 categoryId: 70d03350-bbf9-457d-abc0-cf7d7aa2a3a4
 previewImageUrl: >-
@@ -59,5 +68,5 @@ useTeamPermissions: true
 slots: []
 titleParameter: text
 canBeComposition: false
-created: '2025-02-17T15:34:15.474116+00:00'
-updated: '2025-02-17T15:34:15.474116+00:00'
+created: '2025-01-29T10:47:01.265179+00:00'
+updated: '2025-10-06T21:18:50.04475+00:00'