@rojaostudio/ds 2.0.0-next.12 → 2.0.0-next.14

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);
@@ -1006,9 +1006,9 @@
   --sheet-text: var(--text-body);
   --sheet-title: var(--text-heading);
   --dialog-scrim: var(--surface-scrim);
-  --image-crop-modal-shade: var(--surface-scrim);
-  --image-crop-modal-selection: var(--text-on-cover);
-  --image-crop-modal-handle: var(--text-on-cover);
-  --image-crop-modal-stage-background: var(--surface-muted);
+  --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,13 +1,13 @@
-/* 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;
@@ -18,15 +18,15 @@
   --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;
@@ -65,7 +65,7 @@
   --border-strong: #71717a;
   --border-strong-hover: #52525b;
   --colors-state-info: #2196f3;
-  --text-on-info: #000000;
+  --text-on-info: #ffffff;
   --colors-state-warning: #ff9800;
   --colors-state-warning-strong: #dc7f00;
   --text-on-warning: #000000;
@@ -84,8 +84,8 @@
   --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,20 @@
   --colors-state-info-strong: #2196f3;
   --colors-state-neutral-strong: #52525b;
   --text-on-primary-subtle: #ffffff4d;
-  --surface-tint-subtle: #ffe2c6;
+  --surface-tint-subtle: #f4f6f9;
+  --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 +126,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 +147,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 +171,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 +185,31 @@
   --colors-state-info-strong: #8cc6ff;
   --colors-state-neutral-strong: #a1a1aa;
   --text-on-primary-subtle: #0000004d;
-  --surface-tint-subtle: #b34b00;
+  --surface-tint-subtle: #002445;
 }
 
-.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 +251,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;

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";