@rojaostudio/ds 2.0.0-next.2 → 2.0.0-next.20

package/styles/rds/components.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/build-rds-tokens.ts from tokens/figma/*.txt. Do not edit. */
 @layer rds.tokens {
-:root, .ds-scope, .dark, .ds-plate {
+:root, .ds-scope, [data-rds-scope], .dark, [data-rds-mode], .ds-plate, [data-rds-plate] {
   /* actions */
   --actionbar-background: var(--colors-primary-default);
   --actionbar-divider: var(--colors-primary-light);
@@ -73,7 +73,7 @@
   --button-inverse-focus-ring: var(--text-on-primary-strong);
   --button-inverse-disabled-fill-background: var(--colors-primary-light);
   --button-inverse-disabled-label: var(--text-disabled-invert);
-  --savingbar-background: var(--colors-primary-default);
+  --savingbar-background: var(--surface-page);
   --toggle-label: var(--text-body);
   --toggle-border: var(--border-strong);
   --toggle-background-hover: var(--surface-muted);
@@ -83,7 +83,7 @@
   --toggle-label-disabled: var(--text-disabled);
   --toggle-border-pressed: var(--colors-primary-default);
   --toggle-border-disabled: var(--border-default);
-  --savingbar-text: var(--text-on-primary);
+  --savingbar-text: var(--text-body);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -120,6 +120,7 @@
   --button-size-lg-icon-only: var(--size-24);
   --button-size-lg-text-size: var(--type-body-size);
   --button-size-lg-text-line: var(--type-body-line);
+  --savingbar-focus-ring: var(--focus-ring);
 
   /* blocks */
   --topnav-background: var(--surface-card);
@@ -183,7 +184,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);
@@ -255,11 +256,9 @@
   --tile-danger-soft-icon: var(--text-error);
   --card-background: var(--surface-card);
   --card-border: var(--border-default);
-  --card-footer-background: var(--surface-panel);
   --card-title: var(--text-heading);
   --card-description: var(--text-muted);
   --card-tint-background: var(--surface-tint-default);
-  --card-tint-footer-background: var(--surface-tint-strong);
   --kbd-background: var(--surface-muted);
   --kbd-border: var(--border-default);
   --kbd-label: var(--text-body);
@@ -371,6 +370,24 @@
   --choice-card-preview-background: var(--surface-muted);
   --choice-card-preview-border: var(--border-default);
   --choice-card-preview-icon: var(--text-subtle);
+  --chart-bar-hover: var(--surface-muted);
+  --chart-focus-ring: var(--focus-ring);
+  --chart-tick: var(--border-strong);
+  --choice-list-item-background-hover: var(--surface-muted);
+  --choice-list-item-background-selected: var(--surface-tint-default);
+  --choice-list-item-indicator: var(--colors-primary-default);
+  --choice-list-item-border: var(--border-default);
+  --choice-list-item-title-default: var(--text-body);
+  --choice-list-item-title-disabled: var(--text-disabled);
+  --choice-list-item-description-default: var(--text-muted);
+  --choice-list-item-description-disabled: var(--text-disabled);
+  --choice-list-item-trailing-default: var(--text-body);
+  --choice-list-item-trailing-disabled: var(--text-disabled);
+  --choice-list-focus-ring: var(--focus-ring);
+  --heading-default: var(--text-heading);
+  --heading-accent: var(--colors-accent-default);
+  --choice-list-item-description-selected: var(--text-on-tint);
+  --card-tint-title: var(--text-on-tint);
 
   /* external */
   --google-button-light-background: #ffffff;
@@ -533,7 +550,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);
@@ -562,7 +579,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);
@@ -583,7 +600,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);
@@ -611,7 +628,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);
@@ -632,7 +649,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);
@@ -699,7 +716,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);
@@ -731,7 +748,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);
@@ -754,7 +771,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);
@@ -773,7 +790,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);
@@ -794,7 +811,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);
@@ -922,7 +939,7 @@
   --sidebar-item-background-active: var(--surface-tint-default);
   --sidebar-item-label-default: var(--text-muted);
   --sidebar-item-label-hover: var(--text-body);
-  --sidebar-item-label-active: var(--colors-primary-default);
+  --sidebar-item-label-active: var(--text-on-tint);
   --sidebar-module: var(--text-heading);
   --sidebar-user: var(--text-muted);
   --pagination-focus-ring: var(--focus-ring);
@@ -933,12 +950,6 @@
   --pagination-item-label-disabled: var(--text-disabled);
   --pagination-summary: var(--text-muted);
   --sidebar-item-count: var(--text-muted);
-  --sidebar-dark-background: var(--colors-primary-default);
-  --sidebar-dark-item-background-hover: var(--colors-primary-light);
-  --sidebar-dark-item-label-default: var(--text-on-primary);
-  --sidebar-dark-item-label-hover: var(--text-on-primary-strong);
-  --sidebar-dark-module: var(--text-on-primary-strong);
-  --sidebar-dark-user: var(--text-on-primary);
   --breadcrumb-inverse-label-default: var(--text-on-primary);
   --breadcrumb-inverse-label-hover: var(--text-on-primary-strong);
   --breadcrumb-inverse-label-current: var(--text-on-primary-strong);
@@ -955,11 +966,11 @@
   --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);
-  --sidebar-dark-section-label: var(--text-on-primary);
+  --sidebar-item-indicator: var(--colors-primary-default);
 
   /* overlays */
   --menu-background: var(--surface-card);
@@ -989,5 +1000,9 @@
   --sheet-text: var(--text-body);
   --sheet-title: var(--text-heading);
   --dialog-scrim: var(--surface-scrim);
+  --image-crop-dialog-shade: var(--surface-scrim);
+  --image-crop-dialog-selection: var(--text-on-cover);
+  --image-crop-dialog-handle: var(--text-on-cover);
+  --image-crop-dialog-stage-background: var(--surface-muted);
 }
 }

package/styles/rds/foundation.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/foundation.txt. Do not edit. */
 @layer rds.tokens {
-:root, .ds-scope, .dark, .ds-plate {
+:root, .ds-scope, [data-rds-scope], .dark, [data-rds-mode], .ds-plate, [data-rds-plate] {
   --radius-large: 12px;
   --radius-small: 8px;
   --radius-full: 9999px;

package/styles/rds/theme.css

@@ -1,32 +1,32 @@
-/* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/theme.txt. Do not edit. */
+/* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/brands/rojao.rds.json (the Figma [RDS] brand table, figma/export-brand.js). Do not edit. */
 @layer rds.theme {
-:root, .ds-scope {
+:root, .ds-scope, [data-rds-scope] {
   --colors-primary-light: #6b7488;
   --colors-primary-default: #1b2a4a;
   --colors-primary-dark: #1b2a4a;
   --colors-secondary-light: #6b7488;
   --colors-secondary-default: #1b2a4a;
   --colors-secondary-active: #26344f;
-  --colors-accent-highlight: #ffca96;
+  --colors-accent-highlight: #ffe2c6;
   --colors-accent-default: #ff6a00;
   --colors-accent-hover: #ff9640;
   --colors-accent-invert: #ffffff;
-  --text-heading: #ff6a00;
+  --text-heading: #1b2a4a;
   --text-body: #27272a;
   --text-link: #006bb5;
   --surface-page: #f4f4f5;
   --surface-card: #ffffff;
   --surface-panel: #fafafa;
   --border-default: #e4e4e7;
-  --surface-tint-default: #ffca96;
+  --surface-tint-default: #e2f0ff;
   --text-on-action-tonal: #3a465f;
   --text-on-primary: #ffffff;
   --text-on-secondary: #ffffff;
-  --text-on-accent: #000000;
-  --text-on-tint: #000000;
+  --text-on-accent: #1b2a4a;
+  --text-on-tint: #1b2a4a;
   --colors-state-error: #c50003;
   --colors-state-error-strong: #6f0000;
-  --surface-tint-strong: #ffb066;
+  --surface-tint-strong: #bddeff;
   --text-on-error: #ffffff;
   --surface-action-default: #e2f0ff;
   --surface-action-strong: #bddeff;
@@ -52,8 +52,8 @@
   --colors-state-success: #4caf50;
   --text-on-success: #000000;
   --colors-state-success-strong: #0a7e1c;
-  --surface-cover: #ff6a00;
-  --text-on-cover: #000000;
+  --surface-cover: #00518d;
+  --text-on-cover: #ffffff;
   --text-subtle: #52525b;
   --surface-muted: #f4f4f5;
   --surface-error: #ffe8e5;
@@ -80,12 +80,12 @@
   --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;
-  --colors-accent-mark: #ff9640;
-  --text-on-accent-mark: #000000;
+  --colors-accent-mark: #006bb5;
+  --text-on-accent-mark: #ffffff;
   --type-font-mono: "Roboto Mono", monospace;
   --surface-scrim: #00000080;
   --shadow-ambient: #0000000d;
@@ -103,16 +103,21 @@
   --colors-state-info-strong: #2196f3;
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
-  --surface-tint-subtle: #ffe2c6;
+  --surface-tint-subtle: #f4f6f9;
+  --border-error: #c50003;
+  --rojao-primary: #1b2a4a;
+  --rojao-secondary: #1b2a4a;
+  --rojao-accent: #ff6a00;
+  --rojao-invert: #ffffff;
 }
 
-:root.dark, .dark, .ds-scope.dark, .dark .ds-scope {
+:root.dark, .dark, :root[data-rds-mode="dark"], [data-rds-mode="dark"], .ds-scope.dark, .dark .ds-scope, .ds-scope[data-rds-mode="dark"], [data-rds-mode="dark"] .ds-scope, [data-rds-scope].dark, .dark [data-rds-scope], [data-rds-scope][data-rds-mode="dark"], [data-rds-mode="dark"] [data-rds-scope] {
   --colors-primary-light: #8a91a1;
   --colors-primary-default: #c9cdd8;
   --colors-primary-dark: #e4e6ec;
-  --colors-secondary-default: #8a91a1;
-  --colors-secondary-active: #c9cdd8;
-  --colors-accent-highlight: #d95a00;
+  --colors-secondary-default: #8cc6ff;
+  --colors-secondary-active: #44a7ff;
+  --colors-accent-highlight: #3a465f;
   --colors-accent-default: #ffb066;
   --colors-accent-hover: #ffca96;
   --text-heading: #fafafa;
@@ -122,13 +127,14 @@
   --surface-card: #18181b;
   --surface-panel: #18181b;
   --border-default: #27272a;
-  --surface-tint-default: #b34b00;
+  --surface-tint-default: #003966;
   --text-on-action-tonal: #c9cdd8;
-  --text-on-primary: #000000;
-  --text-on-secondary: #000000;
+  --text-on-primary: #1b2a4a;
+  --text-on-secondary: #1b2a4a;
+  --text-on-accent: #000000;
   --text-on-tint: #ffffff;
   --colors-state-error-strong: #ff6c5c;
-  --surface-tint-strong: #d95a00;
+  --surface-tint-strong: #00518d;
   --surface-action-default: #002445;
   --surface-action-strong: #003966;
   --focus-ring: #f4f4f5;
@@ -142,7 +148,7 @@
   --text-on-lift-action: #ffffff;
   --surface-lift-action-strong: #3a465f;
   --text-on-primary-strong: #000000;
-  --colors-secondary-hover: #aeb6c4;
+  --colors-secondary-hover: #bddeff;
   --colors-state-success-strong: #82d982;
   --text-subtle: #a1a1aa;
   --surface-muted: #27272a;
@@ -166,7 +172,8 @@
   --chart-series-3: #45b7a8;
   --chart-series-4: #db6def;
   --chart-series-5: #4caf50;
-  --colors-accent-mark: #ffb066;
+  --colors-accent-mark: #8cc6ff;
+  --text-on-accent-mark: #000000;
   --surface-scrim: #000000b3;
   --shadow-ambient: #00000033;
   --shadow-key: #00000066;
@@ -179,30 +186,32 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
-  --surface-tint-subtle: #b34b00;
+  --surface-tint-subtle: #002445;
+  --border-error: #ff6c5c;
 }
 
-.ds-plate {
+.ds-plate, [data-rds-plate] {
   --colors-primary-light: #aeb6c4;
   --colors-primary-default: #ffffff;
   --colors-primary-dark: #e4e6ec;
   --colors-secondary-light: #aeb6c4;
   --colors-secondary-default: #ffffff;
   --colors-secondary-active: #c9cdd8;
-  --colors-accent-highlight: #d95a00;
+  --colors-accent-highlight: #3a465f;
   --colors-accent-default: #ffb066;
   --colors-accent-hover: #ffca96;
   --text-heading: #ffffff;
   --text-body: #ffffff;
   --text-link: #ffffff;
   --surface-page: #1b2a4a;
-  --surface-card: #6b7488;
+  --surface-card: #26344f;
   --surface-panel: #1b2a4a;
   --border-default: #ffffff33;
   --surface-tint-default: #ffffff1a;
   --text-on-action-tonal: #ffffff;
   --text-on-primary: #1b2a4a;
   --text-on-secondary: #1b2a4a;
+  --text-on-accent: #000000;
   --text-on-tint: #ffffff;
   --colors-state-error-strong: #ff6c5c;
   --surface-tint-strong: #ffffff33;
@@ -244,7 +253,8 @@
   --chart-series-3: #45b7a8;
   --chart-series-4: #db6def;
   --chart-series-5: #4caf50;
-  --colors-accent-mark: #ffb066;
+  --colors-accent-mark: #8cc6ff;
+  --text-on-accent-mark: #000000;
   --surface-scrim: #000000b3;
   --shadow-ambient: #00000033;
   --shadow-key: #00000066;
@@ -257,5 +267,6 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --surface-tint-subtle: #ffffff0d;
+  --border-error: #ffa598;
 }
 }

package/styles/rds.css

@@ -1,5 +1,5 @@
 /* GENERATED by scripts/build-rds-tokens.ts. Import once: @import "@rojaostudio/ds/styles/rds.css". */
-@layer rds.theme, rds.tokens, rds.components;
+@layer rds.legacy, rds.theme, rds.tokens, rds.components;
 @import "./rds/theme.css";
 @import "./rds/foundation.css";
 @import "./rds/components.css";