@rojaostudio/ds 2.0.0-next.15 → 2.0.0-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.15",
+  "version": "2.0.0-next.16",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.7"
+    "@rojaostudio/ds-core": "1.1.0-next.8"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -2677,10 +2677,10 @@ input:focus-visible + .rds-checkbox__box {
  * an 8 dot. Selected fills the card with the brand. Disabled is the same card at half opacity (as in Figma).
  * tile: a grid cell, 16 inside, centred: the icon, then the label 14/20 semibold and the description 12/16 (8 below
  * the icon). Selected fills it with the brand, the icon square at 10% of choice-card/icon/background/selected, the
- * description at 70%, and a 16 check (11 glyph) 8 from the top right corner.
+ * description at full opacity, and a 16 check (11 glyph) 8 from the top right corner.
  * preview: 8 inside, the picture on top (16:9, a 1px border, corners radius/container, a 24 placeholder icon), then
  * the label 16/24 semibold and the description 14/20, 4 in from the sides. Selected keeps the surface: a 2px border
- * in the brand, the description at 70% and a 20 check (12 glyph) in the picture's bottom right corner.
+ * in the brand, the description at full opacity and a 20 check (12 glyph) in the picture's bottom right corner.
  * The group stacks rows 8 apart; tiles and previews go in a grid (cells of at least 160 and 240), 8 apart.
  */
 .rds-choice-card-group {
@@ -2872,11 +2872,6 @@ input:focus-visible + .rds-checkbox__box {
   color: var(--choice-card-icon-color-selected);
 }
 
-.rds-choice-card--tile.rds-choice-card--selected .rds-choice-card__description,
-.rds-choice-card--preview.rds-choice-card--selected .rds-choice-card__description {
-  color: color-mix(in srgb, var(--_description) 70%, transparent);
-}
-
 .rds-choice-card--tile .rds-choice-card__check {
   position: absolute;
   top: calc(var(--space-8) - var(--border-width));
@@ -4301,7 +4296,7 @@ input:focus-visible + .rds-checkbox__box {
  * FilterChip (Forms collection, filter-chip/*): 32 tall, pill, 12 inside, 4 between icon, label and count;
  * label 14/20 medium. inactive: card fill and a hairline; hover: muted fill, strong hairline; active: the brand
  * at 12% over what is behind, brand border and label; disabled: the whole chip at 50%, the label at 40%.
- * The count reads at 60% of the label. Icon 14, in the label's colour.
+ * The count reads in the label's colour, at full opacity. Icon 14, in the label's colour.
  */
 .rds-filter-chip-group {
   display: flex;
@@ -4392,7 +4387,6 @@ input:focus-visible + .rds-checkbox__box {
 }
 
 .rds-filter-chip__count {
-  color: color-mix(in srgb, currentColor 60%, transparent);
   font-variant-numeric: tabular-nums;
 }
 

package/styles/rds/components.css

@@ -183,7 +183,7 @@
   /* chat */
   --attachment-background: var(--surface-card);
   --attachment-border: var(--border-default);
-  --attachment-border-error: var(--colors-state-error);
+  --attachment-border-error: var(--border-error);
   --attachment-description: var(--text-muted);
   --attachment-error: var(--text-error);
   --attachment-media: var(--surface-muted);
@@ -551,7 +551,7 @@
   --input-border-default: var(--border-strong);
   --input-border-hover: var(--border-strong-hover);
   --input-border-focus: var(--focus-ring);
-  --input-border-error: var(--colors-state-error);
+  --input-border-error: var(--border-error);
   --input-border-disabled: var(--border-default);
   --input-value-default: var(--text-body);
   --input-value-disabled: var(--text-disabled);
@@ -580,7 +580,7 @@
   --textarea-border-default: var(--border-strong);
   --textarea-border-hover: var(--border-strong-hover);
   --textarea-border-focus: var(--focus-ring);
-  --textarea-border-error: var(--colors-state-error);
+  --textarea-border-error: var(--border-error);
   --textarea-border-disabled: var(--border-default);
   --textarea-value-default: var(--text-body);
   --textarea-value-disabled: var(--text-disabled);
@@ -601,7 +601,7 @@
   --select-border-default: var(--border-strong);
   --select-border-hover: var(--border-strong-hover);
   --select-border-focus: var(--focus-ring);
-  --select-border-error: var(--colors-state-error);
+  --select-border-error: var(--border-error);
   --select-border-disabled: var(--border-default);
   --select-value-default: var(--text-body);
   --select-value-disabled: var(--text-disabled);
@@ -629,7 +629,7 @@
   --checkbox-control-background-checked-disabled: var(--text-disabled);
   --checkbox-control-border-default: var(--border-strong);
   --checkbox-control-border-hover: var(--border-strong-hover);
-  --checkbox-control-border-error: var(--colors-state-error);
+  --checkbox-control-border-error: var(--border-error);
   --checkbox-control-border-disabled: var(--border-default);
   --checkbox-control-mark: var(--text-on-secondary);
   --checkbox-control-mark-disabled: var(--surface-card);
@@ -650,7 +650,7 @@
   --radio-control-background-checked-disabled: var(--text-disabled);
   --radio-control-border-default: var(--border-strong);
   --radio-control-border-hover: var(--border-strong-hover);
-  --radio-control-border-error: var(--colors-state-error);
+  --radio-control-border-error: var(--border-error);
   --radio-control-border-disabled: var(--border-default);
   --radio-control-dot: var(--text-on-secondary);
   --radio-control-dot-disabled: var(--surface-card);
@@ -717,7 +717,7 @@
   --otp-slot-background-disabled: var(--surface-disabled);
   --otp-slot-border-default: var(--border-strong);
   --otp-slot-border-active: var(--focus-ring);
-  --otp-slot-border-error: var(--colors-state-error);
+  --otp-slot-border-error: var(--border-error);
   --otp-slot-border-disabled: var(--border-default);
   --combobox-empty: var(--text-muted);
   --calendar-background: var(--surface-card);
@@ -749,7 +749,7 @@
   --file-input-area-border-default: var(--border-strong);
   --file-input-area-border-hover: var(--focus-ring);
   --file-input-area-border-focus: var(--focus-ring);
-  --file-input-area-border-error: var(--colors-state-error);
+  --file-input-area-border-error: var(--border-error);
   --file-input-area-border-disabled: var(--border-default);
   --file-input-area-icon-default: var(--colors-primary-default);
   --file-input-area-icon-disabled: var(--text-disabled);
@@ -772,7 +772,7 @@
   --chip-input-border-default: var(--border-strong);
   --chip-input-border-hover: var(--border-strong-hover);
   --chip-input-border-focus: var(--focus-ring);
-  --chip-input-border-error: var(--colors-state-error);
+  --chip-input-border-error: var(--border-error);
   --chip-input-border-disabled: var(--border-default);
   --chip-input-value-default: var(--text-body);
   --chip-input-value-disabled: var(--text-disabled);
@@ -791,7 +791,7 @@
   --number-input-border-default: var(--border-strong);
   --number-input-border-hover: var(--border-strong-hover);
   --number-input-border-focus: var(--focus-ring);
-  --number-input-border-error: var(--colors-state-error);
+  --number-input-border-error: var(--border-error);
   --number-input-border-disabled: var(--border-default);
   --number-input-value-default: var(--text-body);
   --number-input-value-disabled: var(--text-disabled);
@@ -812,7 +812,7 @@
   --color-input-border-default: var(--border-strong);
   --color-input-border-hover: var(--border-strong-hover);
   --color-input-border-focus: var(--focus-ring);
-  --color-input-border-error: var(--colors-state-error);
+  --color-input-border-error: var(--border-error);
   --color-input-border-disabled: var(--border-default);
   --color-input-value-default: var(--text-body);
   --color-input-value-disabled: var(--text-disabled);
@@ -973,7 +973,7 @@
   --navmenu-trigger-background-open: var(--surface-muted);
   --navmenu-trigger-label: var(--text-body);
   --tabs-soon-background: var(--surface-muted);
-  --tabs-soon-text: var(--text-disabled);
+  --tabs-soon-text: var(--text-subtle);
   --tabs-dot-background: var(--colors-state-success);
   --tabs-dot-indicator: var(--colors-state-success);
   --sidebar-section-label: var(--text-subtle);

package/styles/rds/theme.css

@@ -65,7 +65,7 @@
   --border-strong: #71717a;
   --border-strong-hover: #52525b;
   --colors-state-info: #2196f3;
-  --text-on-info: #ffffff;
+  --text-on-info: #000000;
   --colors-state-warning: #ff9800;
   --colors-state-warning-strong: #dc7f00;
   --text-on-warning: #000000;
@@ -80,7 +80,7 @@
   --surface-neutral: #f4f4f5;
   --text-neutral: #27272a;
   --chart-series-1: #5a6478;
-  --chart-series-2: #dc7f00;
+  --chart-series-2: #bd6a00;
   --chart-series-3: #009688;
   --chart-series-4: #bc4ad0;
   --chart-series-5: #379c3d;
@@ -104,6 +104,7 @@
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
   --surface-tint-subtle: #f4f6f9;
+  --border-error: #c50003;
   --rojao-primary: #1b2a4a;
   --rojao-secondary: #1b2a4a;
   --rojao-accent: #ff6a00;
@@ -186,6 +187,7 @@
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
   --surface-tint-subtle: #002445;
+  --border-error: #ff6c5c;
 }
 
 .ds-plate, [data-rds-plate] {
@@ -265,5 +267,6 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --surface-tint-subtle: #ffffff0d;
+  --border-error: #ffa598;
 }
 }