@rojaostudio/ds-core 1.0.0 → 1.1.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-3QTDO2HW.js +17 -0
- package/dist/{chunk-NIIC6HPN.js → chunk-CFOS2RAD.js} +433 -5
- package/dist/{chunk-MJA5ZGMI.js → chunk-FRWRLCYM.js} +50 -2
- package/dist/generate.d.ts +34 -7
- package/dist/generate.js +2 -2
- package/dist/{generateTheme-Cz0jvLRW.d.ts → generateTheme-CUfNpsKs.d.ts} +2 -2
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -3
- package/dist/{recipe.schema-kfS2fk61.d.ts → recipe.schema-Cq7e82nx.d.ts} +8 -4
- package/dist/recipes.d.ts +2 -2
- package/dist/recipes.js +1 -1
- package/dist/themes.d.ts +2 -2
- package/dist/themes.js +4 -4
- package/dist/tokens.d.ts +48 -0
- package/dist/tokens.js +1 -1
- package/package.json +79 -80
- package/dist/chunk-S5GNBSEX.js +0 -21
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// recipes/index.ts
|
|
2
|
+
var rojao = {
|
|
3
|
+
name: "rojao",
|
|
4
|
+
description: "Brand Roj\xE3o. Navy + flare accent on zinc, Inter (Figma [RDS], brand rojao).",
|
|
5
|
+
brand: {
|
|
6
|
+
primary: "navy-900",
|
|
7
|
+
secondary: "navy-900",
|
|
8
|
+
accent: "flare-700",
|
|
9
|
+
heading: "flare-700"
|
|
10
|
+
},
|
|
11
|
+
surface: "zinc",
|
|
12
|
+
text: "zinc",
|
|
13
|
+
fonts: { body: "inter", display: "inter" }
|
|
14
|
+
};
|
|
15
|
+
var recipes = { rojao };
|
|
16
|
+
|
|
17
|
+
export { recipes, rojao };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { primitives } from './chunk-
|
|
1
|
+
import { primitives } from './chunk-FRWRLCYM.js';
|
|
2
2
|
import { __spreadValues, __spreadProps } from './chunk-ORMEWXMH.js';
|
|
3
3
|
|
|
4
4
|
// generate/scale.ts
|
|
@@ -223,14 +223,14 @@ function brandTones(hex) {
|
|
|
223
223
|
return { hover: scale[hoverStep], on: onColor(hex, scale) };
|
|
224
224
|
}
|
|
225
225
|
var NEUTRAL_SAT_MAX = 20;
|
|
226
|
-
function brandHex(c,
|
|
226
|
+
function brandHex(c, palettes2) {
|
|
227
227
|
var _a, _b;
|
|
228
228
|
if (isHex(c)) return c;
|
|
229
229
|
if (c === "white") return "#ffffff";
|
|
230
230
|
if (c === "black") return "#000000";
|
|
231
231
|
const p = parseRef(c);
|
|
232
|
-
if (p &&
|
|
233
|
-
const raw =
|
|
232
|
+
if (p && palettes2) {
|
|
233
|
+
const raw = palettes2[p.palette];
|
|
234
234
|
if (typeof raw === "string") return (_a = buildScale(raw)[p.step]) != null ? _a : null;
|
|
235
235
|
if (raw && typeof raw === "object") return (_b = raw[String(p.step)]) != null ? _b : null;
|
|
236
236
|
}
|
|
@@ -675,6 +675,434 @@ function resolveTheme(def, opts) {
|
|
|
675
675
|
return { tokens: isDark ? __spreadValues(__spreadValues({}, light2), dark) : light2, isDark };
|
|
676
676
|
}
|
|
677
677
|
|
|
678
|
+
// generate/rdsTheme.ts
|
|
679
|
+
var palettes = primitives.color;
|
|
680
|
+
var WHITE = "#ffffff";
|
|
681
|
+
var BLACK = "#000000";
|
|
682
|
+
var black = (pct) => BLACK + Math.round(pct / 100 * 255).toString(16).padStart(2, "0");
|
|
683
|
+
var white = (pct) => WHITE + Math.round(pct / 100 * 255).toString(16).padStart(2, "0");
|
|
684
|
+
function palette(name, custom) {
|
|
685
|
+
const own = custom == null ? void 0 : custom[name];
|
|
686
|
+
if (typeof own === "string") {
|
|
687
|
+
if (!isHex(own)) throw new Error(`rdsTheme: palette "${name}" is not a hex colour`);
|
|
688
|
+
return buildScale(own);
|
|
689
|
+
}
|
|
690
|
+
if (own) return own;
|
|
691
|
+
const p = palettes[name];
|
|
692
|
+
if (!p || typeof p === "string") throw new Error(`rdsTheme: unknown palette "${name}"`);
|
|
693
|
+
return p;
|
|
694
|
+
}
|
|
695
|
+
function ramp(c, custom) {
|
|
696
|
+
var _a;
|
|
697
|
+
if (isHex(c)) return { base: c, scale: buildScale(c) };
|
|
698
|
+
const m = c.match(/^([a-zA-Z][a-zA-Z0-9]*)-(\d{2,3})$/);
|
|
699
|
+
if (m) {
|
|
700
|
+
const scale = palette(m[1], custom);
|
|
701
|
+
return { base: (_a = scale[Number(m[2])]) != null ? _a : refToHex(c), scale };
|
|
702
|
+
}
|
|
703
|
+
const hex = refToHex(c);
|
|
704
|
+
if (!hex) throw new Error(`rdsTheme: cannot resolve colour "${c}"`);
|
|
705
|
+
return { base: hex, scale: buildScale(hex) };
|
|
706
|
+
}
|
|
707
|
+
var on = (bg) => onColor(bg);
|
|
708
|
+
var ROLES = [
|
|
709
|
+
["colors/primary/light", "d", "b"],
|
|
710
|
+
["colors/primary/default", "d", "b"],
|
|
711
|
+
["colors/primary/dark", "d", "b"],
|
|
712
|
+
["colors/secondary/light", "d", "b"],
|
|
713
|
+
["colors/secondary/default", "d", "b"],
|
|
714
|
+
["colors/secondary/active", "d", "b"],
|
|
715
|
+
["colors/accent/highlight", "d", "d"],
|
|
716
|
+
["colors/accent/default", "d", "d"],
|
|
717
|
+
["colors/accent/hover", "d", "d"],
|
|
718
|
+
["colors/accent/invert", "l", "l"],
|
|
719
|
+
["text/heading", "d", "b"],
|
|
720
|
+
["text/body", "d", "b"],
|
|
721
|
+
["text/link", "d", "b"],
|
|
722
|
+
["surface/page", "d", "b"],
|
|
723
|
+
["surface/card", "d", "b"],
|
|
724
|
+
["surface/panel", "d", "b"],
|
|
725
|
+
["border/default", "d", "b"],
|
|
726
|
+
["surface/tint/default", "d", "b"],
|
|
727
|
+
["text/on/action-tonal", "d", "b"],
|
|
728
|
+
["text/on/primary", "d", "b"],
|
|
729
|
+
["text/on/secondary", "d", "b"],
|
|
730
|
+
["text/on/accent", "d", "d"],
|
|
731
|
+
["text/on/tint", "d", "b"],
|
|
732
|
+
["colors/state/error", "l", "l"],
|
|
733
|
+
["colors/state/error-strong", "d", "d"],
|
|
734
|
+
["surface/tint/strong", "d", "b"],
|
|
735
|
+
["text/on/error", "l", "l"],
|
|
736
|
+
["surface/action/default", "d", "b"],
|
|
737
|
+
["surface/action/strong", "d", "b"],
|
|
738
|
+
["focus/ring", "d", "b"],
|
|
739
|
+
["focus/ring-inset", "d", "b"],
|
|
740
|
+
["surface/disabled", "d", "b"],
|
|
741
|
+
["text/disabled", "d", "b"],
|
|
742
|
+
["text/muted", "d", "b"],
|
|
743
|
+
["text/disabled-invert", "d", "b"],
|
|
744
|
+
["text/action", "d", "b"],
|
|
745
|
+
["surface/lift/action", "d", "b"],
|
|
746
|
+
["text/on/lift-action", "d", "b"],
|
|
747
|
+
["surface/lift/action-strong", "d", "b"],
|
|
748
|
+
["surface/band/action", "l", "l"],
|
|
749
|
+
["surface/band/base", "l", "l"],
|
|
750
|
+
["text/on/band-action", "l", "l"],
|
|
751
|
+
["text/on/band-base", "l", "l"],
|
|
752
|
+
["text/on/primary-strong", "d", "b"],
|
|
753
|
+
["colors/accent/logo", "l", "l"],
|
|
754
|
+
["surface/band/mark-action", "l", "l"],
|
|
755
|
+
["surface/band/mark-base", "l", "l"],
|
|
756
|
+
["colors/secondary/hover", "d", "b"],
|
|
757
|
+
["colors/state/success", "l", "l"],
|
|
758
|
+
["text/on/success", "l", "l"],
|
|
759
|
+
["colors/state/success-strong", "d", "d"],
|
|
760
|
+
["surface/cover", "l", "l"],
|
|
761
|
+
["text/on/cover", "l", "l"],
|
|
762
|
+
["text/subtle", "d", "b"],
|
|
763
|
+
["surface/muted", "d", "b"],
|
|
764
|
+
["surface/error", "d", "d"],
|
|
765
|
+
["colors/primary/active", "d", "b"],
|
|
766
|
+
["surface/muted-strong", "d", "b"],
|
|
767
|
+
["colors/state/error-active", "l", "l"],
|
|
768
|
+
["text/error", "d", "d"],
|
|
769
|
+
["surface/error-strong", "d", "d"],
|
|
770
|
+
["border/strong", "d", "b"],
|
|
771
|
+
["border/strong-hover", "d", "b"],
|
|
772
|
+
["colors/state/info", "l", "l"],
|
|
773
|
+
["text/on/info", "l", "l"],
|
|
774
|
+
["colors/state/warning", "l", "l"],
|
|
775
|
+
["colors/state/warning-strong", "d", "d"],
|
|
776
|
+
["text/on/warning", "l", "l"],
|
|
777
|
+
["colors/state/neutral", "l", "l"],
|
|
778
|
+
["text/on/neutral", "l", "l"],
|
|
779
|
+
["surface/success", "d", "d"],
|
|
780
|
+
["text/success", "d", "d"],
|
|
781
|
+
["surface/info", "d", "d"],
|
|
782
|
+
["text/info", "d", "d"],
|
|
783
|
+
["surface/warning", "d", "d"],
|
|
784
|
+
["text/warning", "d", "d"],
|
|
785
|
+
["surface/neutral", "d", "d"],
|
|
786
|
+
["text/neutral", "d", "d"],
|
|
787
|
+
["chart/series/1", "d", "d"],
|
|
788
|
+
["chart/series/2", "d", "d"],
|
|
789
|
+
["chart/series/3", "d", "d"],
|
|
790
|
+
["chart/series/4", "d", "d"],
|
|
791
|
+
["chart/series/5", "d", "d"],
|
|
792
|
+
["colors/accent/mark", "d", "d"],
|
|
793
|
+
["text/on/accent-mark", "d", "d"],
|
|
794
|
+
["type/font/mono", "l", "l"],
|
|
795
|
+
["surface/scrim", "d", "d"],
|
|
796
|
+
["shadow/ambient", "d", "d"],
|
|
797
|
+
["shadow/key", "d", "d"],
|
|
798
|
+
["shadow/strong", "d", "d"],
|
|
799
|
+
["logo/primary", "d", "d"],
|
|
800
|
+
["logo/accent", "d", "d"],
|
|
801
|
+
["logo/signature", "d", "d"],
|
|
802
|
+
["logo/accent-2", "l", "l"],
|
|
803
|
+
["logo/accent-3", "l", "l"],
|
|
804
|
+
["logo/mono", "d", "d"],
|
|
805
|
+
["logo/inverse", "l", "l"],
|
|
806
|
+
["logo/inverse-signature", "l", "l"],
|
|
807
|
+
["social/ink", "d", "d"],
|
|
808
|
+
["colors/state/info-strong", "d", "d"],
|
|
809
|
+
["colors/state/neutral-strong", "d", "d"],
|
|
810
|
+
["text/on/primary-subtle", "d", "b"],
|
|
811
|
+
["surface/tint/subtle", "d", "b"]
|
|
812
|
+
];
|
|
813
|
+
var TINT_DEFAULT = 200;
|
|
814
|
+
var lighterStep = (s) => s - 100 ;
|
|
815
|
+
var roleVar = (role) => `--${role.replaceAll("/", "-")}`;
|
|
816
|
+
function generateRdsTheme(def) {
|
|
817
|
+
const b = def.brand;
|
|
818
|
+
const own = def.palettes;
|
|
819
|
+
const P = ramp(b.primary, own);
|
|
820
|
+
const S = b.secondary ? ramp(b.secondary, own) : P;
|
|
821
|
+
const A = b.accent ? ramp(b.accent, own) : P;
|
|
822
|
+
const N = def.text && ((own == null ? void 0 : own[def.text]) || palettes[def.text] && typeof palettes[def.text] !== "string") ? palette(def.text, own) : palette("zinc");
|
|
823
|
+
const L = palette("blue");
|
|
824
|
+
const red = palette("red"), green = palette("green"), orange = palette("orange");
|
|
825
|
+
const teal = palette("teal"), purple = palette("purple");
|
|
826
|
+
const heading = b.heading ? ramp(b.heading, own).base : P.base;
|
|
827
|
+
const invert = b.invert ? ramp(b.invert, own).base : WHITE;
|
|
828
|
+
const l = {
|
|
829
|
+
"colors/primary/light": P.scale[500],
|
|
830
|
+
"colors/primary/default": P.base,
|
|
831
|
+
"colors/primary/dark": P.scale[900],
|
|
832
|
+
"colors/primary/active": P.scale[600],
|
|
833
|
+
"colors/secondary/light": S.scale[500],
|
|
834
|
+
"colors/secondary/default": S.base,
|
|
835
|
+
"colors/secondary/active": S.scale[800],
|
|
836
|
+
"colors/secondary/hover": S.scale[700],
|
|
837
|
+
"colors/accent/highlight": A.scale[200],
|
|
838
|
+
"colors/accent/default": A.base,
|
|
839
|
+
"colors/accent/hover": A.scale[400],
|
|
840
|
+
"colors/accent/invert": invert,
|
|
841
|
+
"colors/accent/logo": A.scale[300],
|
|
842
|
+
"colors/accent/mark": A.scale[400],
|
|
843
|
+
"text/heading": heading,
|
|
844
|
+
"text/body": N[800],
|
|
845
|
+
"text/link": L[600],
|
|
846
|
+
"text/muted": N[700],
|
|
847
|
+
"text/subtle": N[600],
|
|
848
|
+
"text/action": L[700],
|
|
849
|
+
"text/disabled": black(40),
|
|
850
|
+
"text/disabled-invert": white(40),
|
|
851
|
+
"surface/page": N[100],
|
|
852
|
+
"surface/card": WHITE,
|
|
853
|
+
"surface/panel": N[50],
|
|
854
|
+
"surface/muted": N[100],
|
|
855
|
+
"surface/muted-strong": N[200],
|
|
856
|
+
"surface/disabled": black(10),
|
|
857
|
+
"surface/scrim": black(50),
|
|
858
|
+
"border/default": N[200],
|
|
859
|
+
"border/strong": N[500],
|
|
860
|
+
"border/strong-hover": N[600],
|
|
861
|
+
"surface/tint/default": A.scale[TINT_DEFAULT],
|
|
862
|
+
"surface/tint/strong": A.scale[300],
|
|
863
|
+
"text/on/tint": BLACK,
|
|
864
|
+
// Light selection fill (pressed Toggle, choice tile): one step lighter than the default tint
|
|
865
|
+
// (200 → 100, 100 → 50).
|
|
866
|
+
"surface/tint/subtle": A.scale[lighterStep(TINT_DEFAULT)],
|
|
867
|
+
"surface/action/default": L[100],
|
|
868
|
+
"surface/action/strong": L[200],
|
|
869
|
+
"text/on/action-tonal": P.scale[700],
|
|
870
|
+
"surface/lift/action": P.scale[50],
|
|
871
|
+
"surface/lift/action-strong": L[100],
|
|
872
|
+
"surface/band/action": L[100],
|
|
873
|
+
"surface/band/base": L[100],
|
|
874
|
+
"text/on/band-action": BLACK,
|
|
875
|
+
"text/on/band-base": BLACK,
|
|
876
|
+
"surface/band/mark-action": L[500],
|
|
877
|
+
"surface/band/mark-base": L[500],
|
|
878
|
+
"surface/cover": A.base,
|
|
879
|
+
"focus/ring": N[800],
|
|
880
|
+
"focus/ring-inset": WHITE,
|
|
881
|
+
"text/on/primary-subtle": white(30),
|
|
882
|
+
"colors/state/error": red[600],
|
|
883
|
+
"colors/state/error-strong": red[800],
|
|
884
|
+
"colors/state/error-active": red[900],
|
|
885
|
+
"colors/state/success": green[400],
|
|
886
|
+
"colors/state/success-strong": green[600],
|
|
887
|
+
"colors/state/warning": orange[400],
|
|
888
|
+
"colors/state/warning-strong": orange[500],
|
|
889
|
+
"colors/state/info": L[500],
|
|
890
|
+
"colors/state/info-strong": L[500],
|
|
891
|
+
"colors/state/neutral": N[600],
|
|
892
|
+
"colors/state/neutral-strong": N[600],
|
|
893
|
+
"surface/error": red[100],
|
|
894
|
+
"surface/error-strong": red[200],
|
|
895
|
+
"text/error": red[800],
|
|
896
|
+
"surface/success": green[100],
|
|
897
|
+
"text/success": green[800],
|
|
898
|
+
"surface/info": L[100],
|
|
899
|
+
"text/info": L[700],
|
|
900
|
+
"surface/warning": orange[100],
|
|
901
|
+
"text/warning": orange[700],
|
|
902
|
+
"surface/neutral": N[100],
|
|
903
|
+
"text/neutral": N[800],
|
|
904
|
+
"chart/series/1": P.scale[600],
|
|
905
|
+
"chart/series/2": orange[500],
|
|
906
|
+
"chart/series/3": teal[500],
|
|
907
|
+
"chart/series/4": purple[500],
|
|
908
|
+
"chart/series/5": green[500],
|
|
909
|
+
"shadow/ambient": black(5),
|
|
910
|
+
"shadow/key": black(10),
|
|
911
|
+
"shadow/strong": black(20),
|
|
912
|
+
"type/font/mono": "Roboto Mono",
|
|
913
|
+
"logo/mono": BLACK,
|
|
914
|
+
"logo/inverse": WHITE,
|
|
915
|
+
"logo/inverse-signature": WHITE,
|
|
916
|
+
"social/ink": BLACK
|
|
917
|
+
};
|
|
918
|
+
for (const [fill, text] of [
|
|
919
|
+
["colors/primary/default", "text/on/primary"],
|
|
920
|
+
["colors/secondary/default", "text/on/secondary"],
|
|
921
|
+
["colors/accent/default", "text/on/accent"],
|
|
922
|
+
["colors/accent/mark", "text/on/accent-mark"],
|
|
923
|
+
["colors/state/error", "text/on/error"],
|
|
924
|
+
["colors/state/success", "text/on/success"],
|
|
925
|
+
["colors/state/info", "text/on/info"],
|
|
926
|
+
["colors/state/warning", "text/on/warning"],
|
|
927
|
+
["colors/state/neutral", "text/on/neutral"],
|
|
928
|
+
["surface/cover", "text/on/cover"],
|
|
929
|
+
["surface/lift/action", "text/on/lift-action"],
|
|
930
|
+
["colors/primary/dark", "text/on/primary-strong"]
|
|
931
|
+
]) l[text] = on(l[fill]);
|
|
932
|
+
l["logo/primary"] = l["colors/primary/default"];
|
|
933
|
+
l["logo/signature"] = l["colors/primary/default"];
|
|
934
|
+
l["logo/accent"] = l["colors/accent/logo"];
|
|
935
|
+
l["logo/accent-2"] = l["colors/secondary/default"];
|
|
936
|
+
l["logo/accent-3"] = l["colors/accent/default"];
|
|
937
|
+
const d = {
|
|
938
|
+
"surface/page": N[900],
|
|
939
|
+
"surface/panel": N[900],
|
|
940
|
+
"surface/card": N[900],
|
|
941
|
+
"surface/muted": N[800],
|
|
942
|
+
"surface/muted-strong": N[700],
|
|
943
|
+
"surface/disabled": white(10),
|
|
944
|
+
"surface/scrim": black(70),
|
|
945
|
+
"border/default": N[800],
|
|
946
|
+
"border/strong": N[500],
|
|
947
|
+
"border/strong-hover": N[400],
|
|
948
|
+
"text/heading": N[50],
|
|
949
|
+
"text/body": N[100],
|
|
950
|
+
"text/muted": N[300],
|
|
951
|
+
"text/subtle": N[400],
|
|
952
|
+
"text/disabled": white(40),
|
|
953
|
+
"text/disabled-invert": black(40),
|
|
954
|
+
"text/link": L[300],
|
|
955
|
+
"text/action": L[300],
|
|
956
|
+
"focus/ring": N[100],
|
|
957
|
+
"focus/ring-inset": N[900],
|
|
958
|
+
"shadow/ambient": black(20),
|
|
959
|
+
"shadow/key": black(40),
|
|
960
|
+
"shadow/strong": black(60),
|
|
961
|
+
"colors/primary/default": P.scale[200],
|
|
962
|
+
"colors/primary/active": P.scale[300],
|
|
963
|
+
"colors/primary/dark": P.scale[100],
|
|
964
|
+
"colors/primary/light": P.scale[400],
|
|
965
|
+
"colors/secondary/default": S.scale[400],
|
|
966
|
+
"colors/secondary/hover": S.scale[300],
|
|
967
|
+
"colors/secondary/active": S.scale[200],
|
|
968
|
+
"colors/secondary/light": S.scale[500],
|
|
969
|
+
"colors/accent/default": A.scale[300],
|
|
970
|
+
"colors/accent/hover": A.scale[200],
|
|
971
|
+
"colors/accent/highlight": A.scale[800],
|
|
972
|
+
"colors/accent/mark": A.scale[300],
|
|
973
|
+
"surface/tint/default": A.scale[900],
|
|
974
|
+
"surface/tint/strong": A.scale[800],
|
|
975
|
+
"text/on/tint": WHITE,
|
|
976
|
+
// No step below 900 in dark: subtle is the default tint.
|
|
977
|
+
"surface/tint/subtle": A.scale[900],
|
|
978
|
+
"surface/action/default": L[900],
|
|
979
|
+
"surface/action/strong": L[800],
|
|
980
|
+
"text/on/action-tonal": P.scale[200],
|
|
981
|
+
"surface/lift/action": P.scale[800],
|
|
982
|
+
"surface/lift/action-strong": P.scale[700],
|
|
983
|
+
"text/on/lift-action": WHITE,
|
|
984
|
+
"colors/state/error-strong": red[400],
|
|
985
|
+
"colors/state/success-strong": green[300],
|
|
986
|
+
"colors/state/warning-strong": orange[400],
|
|
987
|
+
"surface/error": red[900],
|
|
988
|
+
"surface/error-strong": red[900],
|
|
989
|
+
"text/error": red[300],
|
|
990
|
+
"surface/success": green[900],
|
|
991
|
+
"text/success": green[300],
|
|
992
|
+
"surface/info": L[900],
|
|
993
|
+
"text/info": L[300],
|
|
994
|
+
"surface/warning": orange[900],
|
|
995
|
+
"text/warning": orange[300],
|
|
996
|
+
"surface/neutral": N[800],
|
|
997
|
+
"text/neutral": N[200],
|
|
998
|
+
"chart/series/1": P.scale[400],
|
|
999
|
+
"chart/series/2": orange[400],
|
|
1000
|
+
"chart/series/3": teal[400],
|
|
1001
|
+
"chart/series/4": purple[400],
|
|
1002
|
+
"chart/series/5": green[400],
|
|
1003
|
+
"logo/primary": WHITE,
|
|
1004
|
+
"logo/accent": WHITE,
|
|
1005
|
+
"logo/signature": WHITE,
|
|
1006
|
+
"logo/mono": WHITE,
|
|
1007
|
+
"social/ink": WHITE,
|
|
1008
|
+
"colors/state/info-strong": L[300],
|
|
1009
|
+
"colors/state/neutral-strong": N[400],
|
|
1010
|
+
"text/on/primary-subtle": black(30)
|
|
1011
|
+
};
|
|
1012
|
+
for (const [fill, text] of [
|
|
1013
|
+
["colors/primary/default", "text/on/primary"],
|
|
1014
|
+
["colors/secondary/default", "text/on/secondary"],
|
|
1015
|
+
["colors/accent/default", "text/on/accent"],
|
|
1016
|
+
["colors/accent/mark", "text/on/accent-mark"],
|
|
1017
|
+
["colors/primary/dark", "text/on/primary-strong"]
|
|
1018
|
+
]) d[text] = on(d[fill]);
|
|
1019
|
+
const plate = l["colors/primary/default"];
|
|
1020
|
+
const ink = on(plate);
|
|
1021
|
+
const inkA = ink === WHITE ? white : black;
|
|
1022
|
+
const antiInk = ink === WHITE ? black : white;
|
|
1023
|
+
const br = {
|
|
1024
|
+
"colors/primary/light": P.scale[300],
|
|
1025
|
+
"colors/primary/default": ink,
|
|
1026
|
+
"colors/primary/dark": P.scale[100],
|
|
1027
|
+
"colors/primary/active": P.scale[200],
|
|
1028
|
+
"colors/secondary/light": S.scale[300],
|
|
1029
|
+
"colors/secondary/default": ink,
|
|
1030
|
+
"colors/secondary/active": S.scale[200],
|
|
1031
|
+
"colors/secondary/hover": S.scale[100],
|
|
1032
|
+
"text/heading": ink,
|
|
1033
|
+
"text/body": ink,
|
|
1034
|
+
"text/link": contrastRatio(l["colors/accent/invert"], plate) >= 4.5 ? l["colors/accent/invert"] : ink,
|
|
1035
|
+
"surface/page": plate,
|
|
1036
|
+
"surface/card": l["colors/primary/light"],
|
|
1037
|
+
"surface/panel": plate,
|
|
1038
|
+
"border/default": inkA(20),
|
|
1039
|
+
"surface/tint/default": inkA(10),
|
|
1040
|
+
"surface/tint/strong": inkA(20),
|
|
1041
|
+
"surface/tint/subtle": inkA(5),
|
|
1042
|
+
"text/on/action-tonal": ink,
|
|
1043
|
+
"text/on/primary": plate,
|
|
1044
|
+
"text/on/secondary": plate,
|
|
1045
|
+
"text/on/tint": ink,
|
|
1046
|
+
"surface/action/default": inkA(10),
|
|
1047
|
+
"surface/action/strong": inkA(20),
|
|
1048
|
+
"focus/ring": ink,
|
|
1049
|
+
"focus/ring-inset": plate,
|
|
1050
|
+
"surface/disabled": inkA(10),
|
|
1051
|
+
"text/disabled": inkA(40),
|
|
1052
|
+
"text/muted": inkA(70),
|
|
1053
|
+
"text/disabled-invert": antiInk(40),
|
|
1054
|
+
"text/action": ink,
|
|
1055
|
+
"surface/lift/action": inkA(10),
|
|
1056
|
+
"text/on/lift-action": ink,
|
|
1057
|
+
"surface/lift/action-strong": inkA(20),
|
|
1058
|
+
"text/on/primary-strong": plate,
|
|
1059
|
+
"text/subtle": inkA(60),
|
|
1060
|
+
"surface/muted": inkA(10),
|
|
1061
|
+
"surface/muted-strong": inkA(20),
|
|
1062
|
+
"border/strong": inkA(60),
|
|
1063
|
+
"border/strong-hover": inkA(80),
|
|
1064
|
+
"text/on/primary-subtle": inkA(30)
|
|
1065
|
+
};
|
|
1066
|
+
const out = { light: {}, dark: {}, brand: {} };
|
|
1067
|
+
const pick = (src, role) => {
|
|
1068
|
+
var _a;
|
|
1069
|
+
const table = src === "l" ? l : src === "d" ? d : br;
|
|
1070
|
+
const v = (_a = table[role]) != null ? _a : l[role];
|
|
1071
|
+
if (v === void 0) throw new Error(`rdsTheme: no value for "${role}"`);
|
|
1072
|
+
return v;
|
|
1073
|
+
};
|
|
1074
|
+
for (const [role, darkSrc, brandSrc] of ROLES) {
|
|
1075
|
+
out.light[roleVar(role)] = pick("l", role);
|
|
1076
|
+
out.dark[roleVar(role)] = pick(darkSrc, role);
|
|
1077
|
+
out.brand[roleVar(role)] = pick(brandSrc, role);
|
|
1078
|
+
}
|
|
1079
|
+
return out;
|
|
1080
|
+
}
|
|
1081
|
+
function emitRdsCss(theme, opts = {}) {
|
|
1082
|
+
var _a, _b, _c;
|
|
1083
|
+
const scope = (_a = opts.scope) != null ? _a : ":root, .ds-scope";
|
|
1084
|
+
const dark = (_b = opts.dark) != null ? _b : ".dark";
|
|
1085
|
+
const plate = (_c = opts.plate) != null ? _c : ".ds-plate";
|
|
1086
|
+
const block2 = (sel, map, only) => {
|
|
1087
|
+
const lines = Object.entries(map).filter(([k, v]) => !only || only[k] !== v).map(([k, v]) => ` ${k}: ${k === "--type-font-mono" ? `"${v}", monospace` : v};`);
|
|
1088
|
+
return `${sel} {
|
|
1089
|
+
${lines.join("\n")}
|
|
1090
|
+
}`;
|
|
1091
|
+
};
|
|
1092
|
+
const scopes = scope.split(",").map((s) => s.trim());
|
|
1093
|
+
const darkSel = scopes.map((s) => s === ":root" ? `:root${dark}, ${dark}` : `${s}${dark}, ${dark} ${s}`).join(", ");
|
|
1094
|
+
return [
|
|
1095
|
+
block2(scope, theme.light),
|
|
1096
|
+
block2(darkSel, theme.dark, theme.light),
|
|
1097
|
+
block2(plate, theme.brand, theme.light)
|
|
1098
|
+
].join("\n\n") + "\n";
|
|
1099
|
+
}
|
|
1100
|
+
function rdsContrast(theme, mode, fg, bg) {
|
|
1101
|
+
const a = theme[mode][roleVar(fg)], c = theme[mode][roleVar(bg)];
|
|
1102
|
+
if (!/^#[0-9a-f]{6}$/i.test(a) || !/^#[0-9a-f]{6}$/i.test(c)) return null;
|
|
1103
|
+
return contrastRatio(a, c);
|
|
1104
|
+
}
|
|
1105
|
+
|
|
678
1106
|
// generate/emitCss.ts
|
|
679
1107
|
var SECTIONS = [
|
|
680
1108
|
{ label: "Tipografia", test: (k) => k.startsWith("--font-") },
|
|
@@ -895,4 +1323,4 @@ neutral 50 ${neutral[50]} \xB7 500 ${neutral[500]} \xB7 900 ${neutral[900]}
|
|
|
895
1323
|
`;
|
|
896
1324
|
}
|
|
897
1325
|
|
|
898
|
-
export { SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance, resolveTheme };
|
|
1326
|
+
export { ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, refToHex, relativeLuminance, resolveTheme, roleVar };
|
|
@@ -244,9 +244,57 @@ var primitives = {
|
|
|
244
244
|
700: "#8a2900",
|
|
245
245
|
800: "#651a00",
|
|
246
246
|
900: "#440c00"
|
|
247
|
+
},
|
|
248
|
+
// Rojão ramps from [RDS] Primitives (2.0). The RDS theme roles read zinc as the
|
|
249
|
+
// neutral axis; navy/flare are the Rojão brand; coal is the near-black neutral.
|
|
250
|
+
zinc: {
|
|
251
|
+
50: "#fafafa",
|
|
252
|
+
100: "#f4f4f5",
|
|
253
|
+
200: "#e4e4e7",
|
|
254
|
+
300: "#d4d4d8",
|
|
255
|
+
400: "#a1a1aa",
|
|
256
|
+
500: "#71717a",
|
|
257
|
+
600: "#52525b",
|
|
258
|
+
700: "#3f3f46",
|
|
259
|
+
800: "#27272a",
|
|
260
|
+
900: "#18181b"
|
|
261
|
+
},
|
|
262
|
+
navy: {
|
|
263
|
+
50: "#f4f6f9",
|
|
264
|
+
100: "#e4e6ec",
|
|
265
|
+
200: "#c9cdd8",
|
|
266
|
+
300: "#aeb6c4",
|
|
267
|
+
400: "#8a91a1",
|
|
268
|
+
500: "#6b7488",
|
|
269
|
+
600: "#5a6478",
|
|
270
|
+
700: "#3a465f",
|
|
271
|
+
800: "#26344f",
|
|
272
|
+
900: "#1b2a4a"
|
|
273
|
+
},
|
|
274
|
+
flare: {
|
|
275
|
+
50: "#fff3e8",
|
|
276
|
+
100: "#ffe2c6",
|
|
277
|
+
200: "#ffca96",
|
|
278
|
+
300: "#ffb066",
|
|
279
|
+
400: "#ff9640",
|
|
280
|
+
500: "#ff8c3a",
|
|
281
|
+
600: "#ff7a1a",
|
|
282
|
+
700: "#ff6a00",
|
|
283
|
+
800: "#d95a00",
|
|
284
|
+
900: "#b34b00"
|
|
285
|
+
},
|
|
286
|
+
coal: {
|
|
287
|
+
50: "#ecedf0",
|
|
288
|
+
100: "#d0d3db",
|
|
289
|
+
200: "#a3a8b5",
|
|
290
|
+
300: "#6e7590",
|
|
291
|
+
400: "#474c5a",
|
|
292
|
+
500: "#353a47",
|
|
293
|
+
600: "#2d3240",
|
|
294
|
+
700: "#232833",
|
|
295
|
+
800: "#181b21",
|
|
296
|
+
900: "#0f1115"
|
|
247
297
|
}
|
|
248
|
-
// Paletas Project (coal/flare/zinc/ash/ember) saíram do core → viraram
|
|
249
|
-
// custom por marca em recipes/index.ts (palettes), geradas no theme.css.
|
|
250
298
|
},
|
|
251
299
|
space: {
|
|
252
300
|
0: 0,
|
package/dist/generate.d.ts
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
|
-
export { G as GenResult, R as ResolvedTheme, T as TokenMap, g as generateTheme, r as resolveTheme } from './generateTheme-
|
|
2
|
-
import { a as BrandDef } from './recipe.schema-
|
|
3
|
-
export { A as Archetype, B as BrandColors, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-
|
|
1
|
+
export { G as GenResult, R as ResolvedTheme, T as TokenMap, g as generateTheme, r as resolveTheme } from './generateTheme-CUfNpsKs.js';
|
|
2
|
+
import { a as BrandDef } from './recipe.schema-Cq7e82nx.js';
|
|
3
|
+
export { A as Archetype, B as BrandColors, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-Cq7e82nx.js';
|
|
4
|
+
|
|
5
|
+
type RdsMode = "light" | "dark" | "brand";
|
|
6
|
+
type RdsTheme = Record<RdsMode, Record<string, string>>;
|
|
7
|
+
/**
|
|
8
|
+
* Roles of the [RDS] theme collection, in Figma order: [name, dark source, brand source].
|
|
9
|
+
* The light mode always reads the plain base token. In dark and brand, Figma points either to the
|
|
10
|
+
* mode's own variant (`d` = base dark/…, `b` = base brand/…) or back to another one (`l` = plain).
|
|
11
|
+
*/
|
|
12
|
+
declare const ROLES: ReadonlyArray<readonly [string, "l" | "d", "l" | "d" | "b"]>;
|
|
13
|
+
/** CSS custom property of a role: the Figma path with hyphens (the [RDS] codeSyntax rule). */
|
|
14
|
+
declare const roleVar: (role: string) => string;
|
|
15
|
+
declare function generateRdsTheme(def: BrandDef): RdsTheme;
|
|
16
|
+
type RdsCssOptions = {
|
|
17
|
+
/** Scope of the light mode. Default `:root, .ds-scope`. */
|
|
18
|
+
scope?: string;
|
|
19
|
+
/** Selector of the dark mode, combined with the scope. Default `.dark`. */
|
|
20
|
+
dark?: string;
|
|
21
|
+
/** Selector of the brand plate (a section painted with the primary). Default `.ds-plate`. */
|
|
22
|
+
plate?: string;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* The theme as CSS. Dark and plate only carry what differs from light: they inherit the rest
|
|
26
|
+
* through the cascade, like the [RDS] modes that point back to the plain token.
|
|
27
|
+
*/
|
|
28
|
+
declare function emitRdsCss(theme: RdsTheme, opts?: RdsCssOptions): string;
|
|
29
|
+
/** Contrast of a role pair in one mode (alpha colours are not measured: they depend on what is below). */
|
|
30
|
+
declare function rdsContrast(theme: RdsTheme, mode: RdsMode, fg: string, bg: string): number | null;
|
|
4
31
|
|
|
5
32
|
/**
|
|
6
33
|
* emitCss.ts — formata o output do generateTheme num theme.css legível.
|
|
@@ -12,7 +39,7 @@ declare function emitCss(def: BrandDef): string;
|
|
|
12
39
|
|
|
13
40
|
type ClaudeMdTarget = "claude" | "cursor" | "agents";
|
|
14
41
|
interface ClaudeMdOptions {
|
|
15
|
-
/** URL
|
|
42
|
+
/** URL de um CSS de tema hospedado, se houver. Sem default: o padrão é arquivo local. */
|
|
16
43
|
cssUrl?: string;
|
|
17
44
|
}
|
|
18
45
|
declare function emitClaudeMd(def: BrandDef, opts?: ClaudeMdOptions): string;
|
|
@@ -22,7 +49,7 @@ declare function emitClaudeMd(def: BrandDef, opts?: ClaudeMdOptions): string;
|
|
|
22
49
|
*
|
|
23
50
|
* O motor (generateTheme) resolve cor por step(palette, n) → var(--color-<p>-<n>),
|
|
24
51
|
* o que exige uma paleta com escala pronta. Pra cor de marca arbitrária — o
|
|
25
|
-
*
|
|
52
|
+
* cor livre escolhida por quem usa — não há paleta curada: esta
|
|
26
53
|
* função deriva a escala mantendo o matiz e cravando a cor ORIGINAL no step de
|
|
27
54
|
* lightness mais próximo, pra o usuário sempre enxergar a SUA cor no resultado.
|
|
28
55
|
*
|
|
@@ -32,7 +59,7 @@ declare function emitClaudeMd(def: BrandDef, opts?: ClaudeMdOptions): string;
|
|
|
32
59
|
* do HSL antigo). Quentes (amarelo/âmbar) giram o matiz pro laranja ao escurecer —
|
|
33
60
|
* como o Material — porque amarelo-escuro-vibrante não existe no sRGB.
|
|
34
61
|
*
|
|
35
|
-
* Semente:
|
|
62
|
+
* Semente: um buildPalette de 5 slots, expandido para 10 steps,
|
|
36
63
|
* mais os helpers de contraste WCAG (on-color legível sobre cor saturada).
|
|
37
64
|
*/
|
|
38
65
|
type ScaleStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
@@ -83,4 +110,4 @@ declare function isNeutralBrand(def: {
|
|
|
83
110
|
palettes?: PaletteDefs;
|
|
84
111
|
}): boolean;
|
|
85
112
|
|
|
86
|
-
export { BrandDef, type ClaudeMdOptions, type ClaudeMdTarget, SCALE_STEPS, type Scale, type ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance };
|
|
113
|
+
export { BrandDef, type ClaudeMdOptions, type ClaudeMdTarget, ROLES as RDS_ROLES, type RdsCssOptions, type RdsMode, type RdsTheme, SCALE_STEPS, type Scale, type ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, refToHex, relativeLuminance, roleVar };
|
package/dist/generate.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance, resolveTheme } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-CFOS2RAD.js';
|
|
2
|
+
import './chunk-FRWRLCYM.js';
|
|
3
3
|
import './chunk-ORMEWXMH.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as BrandDef } from './recipe.schema-
|
|
1
|
+
import { a as BrandDef } from './recipe.schema-Cq7e82nx.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* generateTheme.ts — motor puro do gerador de tema (Fase 1, issue #12).
|
|
@@ -9,7 +9,7 @@ import { a as BrandDef } from './recipe.schema-kfS2fk61.js';
|
|
|
9
9
|
*
|
|
10
10
|
* Dark: bloco só contém vars que MUDAM vs light (CSS cascade). Surfaces/text
|
|
11
11
|
* vêm dos eixos dark (override) ou herdam o light. Bordas dark = white-alpha
|
|
12
|
-
* canônico 8/14/22 (canonicaliza drift de zinc-alpha
|
|
12
|
+
* canônico 8/14/22 (canonicaliza drift de zinc-alpha herdado).
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
type TokenMap = Record<string, string>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { G as GenResult, R as ResolvedTheme, T as TokenMap, g as generateTheme, r as resolveTheme } from './generateTheme-
|
|
2
|
-
export { ClaudeMdOptions, ClaudeMdTarget, SCALE_STEPS, Scale, ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance } from './generate.js';
|
|
3
|
-
export { A as Archetype, B as BrandColors, a as BrandDef, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-
|
|
1
|
+
export { G as GenResult, R as ResolvedTheme, T as TokenMap, g as generateTheme, r as resolveTheme } from './generateTheme-CUfNpsKs.js';
|
|
2
|
+
export { ClaudeMdOptions, ClaudeMdTarget, RDS_ROLES, RdsCssOptions, RdsMode, RdsTheme, SCALE_STEPS, Scale, ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, refToHex, relativeLuminance, roleVar } from './generate.js';
|
|
3
|
+
export { A as Archetype, B as BrandColors, a as BrandDef, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-Cq7e82nx.js';
|
|
4
4
|
export { primitives, tokens } from './tokens.js';
|
|
5
5
|
export { RecipeName, recipes } from './recipes.js';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { recipes } from './chunk-
|
|
2
|
-
export { SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, refToHex, relativeLuminance, resolveTheme } from './chunk-
|
|
3
|
-
export { primitives, tokens } from './chunk-
|
|
1
|
+
export { recipes } from './chunk-3QTDO2HW.js';
|
|
2
|
+
export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-CFOS2RAD.js';
|
|
3
|
+
export { primitives, tokens } from './chunk-FRWRLCYM.js';
|
|
4
4
|
import './chunk-ORMEWXMH.js';
|
|
@@ -77,6 +77,10 @@ type BrandColors = {
|
|
|
77
77
|
accentLight?: ColorRef;
|
|
78
78
|
onAccent?: ColorRef;
|
|
79
79
|
borderFocus?: ColorRef;
|
|
80
|
+
/** [RDS] text/heading. Absent → the primary colour. */
|
|
81
|
+
heading?: ColorRef;
|
|
82
|
+
/** [RDS] colors/accent/invert (accent over a dark plate). Absent → white. */
|
|
83
|
+
invert?: ColorRef;
|
|
80
84
|
};
|
|
81
85
|
type BrandDef = {
|
|
82
86
|
/** → seletor .theme-<name> */
|
|
@@ -121,8 +125,8 @@ type BrandDef = {
|
|
|
121
125
|
* Dois eixos neutros independentes (o padrão real do sistema):
|
|
122
126
|
* - surface: page / default / raised. (overlay usa o text-900.)
|
|
123
127
|
* - text: text-* / border-* / icon.
|
|
124
|
-
* Caso simples: surface === text.
|
|
125
|
-
*
|
|
128
|
+
* Caso simples: surface === text. Ex.: surface=cream, text=neutral.
|
|
129
|
+
* um produto consumidor: surface=zinc(light)/coal(dark), text=zinc. (substitui o antigo surfaceTint.)
|
|
126
130
|
*/
|
|
127
131
|
surface: PaletteRef;
|
|
128
132
|
text: PaletteRef;
|
|
@@ -148,13 +152,13 @@ type BrandDef = {
|
|
|
148
152
|
strategy?: DarkStrategy;
|
|
149
153
|
/** overrides explícitos do brand no dark (ex: chromatic clareado p/ teal-400). */
|
|
150
154
|
brand?: Partial<BrandColors>;
|
|
151
|
-
/** eixos no dark — default = os do light. ex:
|
|
155
|
+
/** eixos no dark — default = os do light. ex: uma marca cream→neutral, um produto consumidor zinc→coal. */
|
|
152
156
|
surface?: PaletteRef;
|
|
153
157
|
text?: PaletteRef;
|
|
154
158
|
};
|
|
155
159
|
/**
|
|
156
160
|
* Tokens de componente específicos (shell, choice-card, selection, tooltip…).
|
|
157
|
-
* v1 NÃO gera — passthrough/patch.
|
|
161
|
+
* v1 NÃO gera — passthrough/patch. Ver issue #12 (v2).
|
|
158
162
|
*/
|
|
159
163
|
extras?: Record<string, {
|
|
160
164
|
light?: string;
|
package/dist/recipes.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as BrandDef } from './recipe.schema-
|
|
1
|
+
import { a as BrandDef } from './recipe.schema-Cq7e82nx.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* recipes/index.ts — as receitas PÚBLICAS do design system.
|
|
@@ -15,7 +15,7 @@ import { a as BrandDef } from './recipe.schema-kfS2fk61.js';
|
|
|
15
15
|
* ele não descreve marca de ninguém, descreve ponto de partida.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
/** rojao —
|
|
18
|
+
/** rojao — navy + flare accent on zinc, Inter. The `rojao` brand of the Figma [RDS] (2.0). */
|
|
19
19
|
declare const rojao: BrandDef;
|
|
20
20
|
declare const recipes: {
|
|
21
21
|
readonly rojao: BrandDef;
|
package/dist/recipes.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { recipes, rojao } from './chunk-
|
|
1
|
+
export { recipes, rojao } from './chunk-3QTDO2HW.js';
|
|
2
2
|
import './chunk-ORMEWXMH.js';
|
package/dist/themes.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as BrandDef } from './recipe.schema-
|
|
2
|
-
import { T as TokenMap } from './generateTheme-
|
|
1
|
+
import { a as BrandDef } from './recipe.schema-Cq7e82nx.js';
|
|
2
|
+
import { T as TokenMap } from './generateTheme-CUfNpsKs.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* themes/index.ts — catálogo de temas de NICHO (vitrine/Linkpage de lojistas).
|
package/dist/themes.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { generateTheme } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
import { generateTheme } from './chunk-CFOS2RAD.js';
|
|
2
|
+
import './chunk-FRWRLCYM.js';
|
|
3
3
|
import { __spreadValues, __objRest } from './chunk-ORMEWXMH.js';
|
|
4
4
|
|
|
5
5
|
// themes/index.ts
|
|
@@ -92,11 +92,11 @@ var NICHE_THEMES = [
|
|
|
92
92
|
display: UPPER,
|
|
93
93
|
radius: { avatar: "soft", card: "round", control: "pill" }
|
|
94
94
|
}, MENU)),
|
|
95
|
-
// PILOTO de tema PREMIUM bespoke (skin layer
|
|
95
|
+
// PILOTO de tema PREMIUM bespoke (skin layer). Identidade de FOGO: brand
|
|
96
96
|
// vermelho-fogo + accent laranja sobre coal, display punchy (Bricolage) caixa-alta,
|
|
97
97
|
// rays no fundo e hero overlay forte (scrim 60). O DS continua AGNÓSTICO: gera só os
|
|
98
98
|
// tokens; a arte/CSS de hambúrguer (gradiente quente, glow, slot de ilustração) mora
|
|
99
|
-
//
|
|
99
|
+
// numa camada de skin do produto, injetada por cima quando a conta usa esta identidade.
|
|
100
100
|
niche("brasa-pop", "Brasa Pop", "Hamburgueria", "dark", __spreadValues({
|
|
101
101
|
brand: { primary: "#dc2626", accent: "#f97316", secondary: "#991b1b" },
|
|
102
102
|
surface: "coal",
|
package/dist/tokens.d.ts
CHANGED
|
@@ -230,6 +230,54 @@ declare const primitives: {
|
|
|
230
230
|
readonly 800: "#651a00";
|
|
231
231
|
readonly 900: "#440c00";
|
|
232
232
|
};
|
|
233
|
+
readonly zinc: {
|
|
234
|
+
readonly 50: "#fafafa";
|
|
235
|
+
readonly 100: "#f4f4f5";
|
|
236
|
+
readonly 200: "#e4e4e7";
|
|
237
|
+
readonly 300: "#d4d4d8";
|
|
238
|
+
readonly 400: "#a1a1aa";
|
|
239
|
+
readonly 500: "#71717a";
|
|
240
|
+
readonly 600: "#52525b";
|
|
241
|
+
readonly 700: "#3f3f46";
|
|
242
|
+
readonly 800: "#27272a";
|
|
243
|
+
readonly 900: "#18181b";
|
|
244
|
+
};
|
|
245
|
+
readonly navy: {
|
|
246
|
+
readonly 50: "#f4f6f9";
|
|
247
|
+
readonly 100: "#e4e6ec";
|
|
248
|
+
readonly 200: "#c9cdd8";
|
|
249
|
+
readonly 300: "#aeb6c4";
|
|
250
|
+
readonly 400: "#8a91a1";
|
|
251
|
+
readonly 500: "#6b7488";
|
|
252
|
+
readonly 600: "#5a6478";
|
|
253
|
+
readonly 700: "#3a465f";
|
|
254
|
+
readonly 800: "#26344f";
|
|
255
|
+
readonly 900: "#1b2a4a";
|
|
256
|
+
};
|
|
257
|
+
readonly flare: {
|
|
258
|
+
readonly 50: "#fff3e8";
|
|
259
|
+
readonly 100: "#ffe2c6";
|
|
260
|
+
readonly 200: "#ffca96";
|
|
261
|
+
readonly 300: "#ffb066";
|
|
262
|
+
readonly 400: "#ff9640";
|
|
263
|
+
readonly 500: "#ff8c3a";
|
|
264
|
+
readonly 600: "#ff7a1a";
|
|
265
|
+
readonly 700: "#ff6a00";
|
|
266
|
+
readonly 800: "#d95a00";
|
|
267
|
+
readonly 900: "#b34b00";
|
|
268
|
+
};
|
|
269
|
+
readonly coal: {
|
|
270
|
+
readonly 50: "#ecedf0";
|
|
271
|
+
readonly 100: "#d0d3db";
|
|
272
|
+
readonly 200: "#a3a8b5";
|
|
273
|
+
readonly 300: "#6e7590";
|
|
274
|
+
readonly 400: "#474c5a";
|
|
275
|
+
readonly 500: "#353a47";
|
|
276
|
+
readonly 600: "#2d3240";
|
|
277
|
+
readonly 700: "#232833";
|
|
278
|
+
readonly 800: "#181b21";
|
|
279
|
+
readonly 900: "#0f1115";
|
|
280
|
+
};
|
|
233
281
|
};
|
|
234
282
|
readonly space: {
|
|
235
283
|
readonly 0: 0;
|
package/dist/tokens.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { darkTokens, primitives, tokens } from './chunk-
|
|
1
|
+
export { darkTokens, primitives, tokens } from './chunk-FRWRLCYM.js';
|
|
2
2
|
import './chunk-ORMEWXMH.js';
|
package/package.json
CHANGED
|
@@ -1,80 +1,79 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@rojaostudio/ds-core",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "O motor do Rojão DS — tokens, derivação de tema e emissores. Sem React, sem Tailwind, sem CSS.",
|
|
5
|
-
"license": "MIT",
|
|
6
|
-
"author": "Rojão Studio (https://rojao.studio)",
|
|
7
|
-
"homepage": "https://ds.rojao.ai",
|
|
8
|
-
"repository": {
|
|
9
|
-
"type": "git",
|
|
10
|
-
"url": "git+https://github.com/rojaostudio/ds.git",
|
|
11
|
-
"directory": "packages/ds-core"
|
|
12
|
-
},
|
|
13
|
-
"bugs": {
|
|
14
|
-
"url": "https://github.com/rojaostudio/ds/issues"
|
|
15
|
-
},
|
|
16
|
-
"keywords": [
|
|
17
|
-
"design-tokens",
|
|
18
|
-
"theme-generator",
|
|
19
|
-
"color-scale",
|
|
20
|
-
"oklch",
|
|
21
|
-
"wcag",
|
|
22
|
-
"contrast",
|
|
23
|
-
"css-variables",
|
|
24
|
-
"design-system"
|
|
25
|
-
],
|
|
26
|
-
"sideEffects": false,
|
|
27
|
-
"exports": {
|
|
28
|
-
".": {
|
|
29
|
-
"types": "./dist/index.d.ts",
|
|
30
|
-
"import": "./dist/index.js",
|
|
31
|
-
"default": "./dist/index.js"
|
|
32
|
-
},
|
|
33
|
-
"./tokens": {
|
|
34
|
-
"types": "./dist/tokens.d.ts",
|
|
35
|
-
"import": "./dist/tokens.js",
|
|
36
|
-
"default": "./dist/tokens.js"
|
|
37
|
-
},
|
|
38
|
-
"./generate": {
|
|
39
|
-
"types": "./dist/generate.d.ts",
|
|
40
|
-
"import": "./dist/generate.js",
|
|
41
|
-
"default": "./dist/generate.js"
|
|
42
|
-
},
|
|
43
|
-
"./recipes": {
|
|
44
|
-
"types": "./dist/recipes.d.ts",
|
|
45
|
-
"import": "./dist/recipes.js",
|
|
46
|
-
"default": "./dist/recipes.js"
|
|
47
|
-
},
|
|
48
|
-
"./themes": {
|
|
49
|
-
"types": "./dist/themes.d.ts",
|
|
50
|
-
"import": "./dist/themes.js",
|
|
51
|
-
"default": "./dist/themes.js"
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
"files": [
|
|
55
|
-
"LICENSE",
|
|
56
|
-
"README.md",
|
|
57
|
-
"dist"
|
|
58
|
-
],
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@rojaostudio/ds-core",
|
|
3
|
+
"version": "1.1.0-next.1",
|
|
4
|
+
"description": "O motor do Rojão DS — tokens, derivação de tema e emissores. Sem React, sem Tailwind, sem CSS.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Rojão Studio (https://rojao.studio)",
|
|
7
|
+
"homepage": "https://ds.rojao.ai",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/rojaostudio/ds.git",
|
|
11
|
+
"directory": "packages/ds-core"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/rojaostudio/ds/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"design-tokens",
|
|
18
|
+
"theme-generator",
|
|
19
|
+
"color-scale",
|
|
20
|
+
"oklch",
|
|
21
|
+
"wcag",
|
|
22
|
+
"contrast",
|
|
23
|
+
"css-variables",
|
|
24
|
+
"design-system"
|
|
25
|
+
],
|
|
26
|
+
"sideEffects": false,
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"import": "./dist/index.js",
|
|
31
|
+
"default": "./dist/index.js"
|
|
32
|
+
},
|
|
33
|
+
"./tokens": {
|
|
34
|
+
"types": "./dist/tokens.d.ts",
|
|
35
|
+
"import": "./dist/tokens.js",
|
|
36
|
+
"default": "./dist/tokens.js"
|
|
37
|
+
},
|
|
38
|
+
"./generate": {
|
|
39
|
+
"types": "./dist/generate.d.ts",
|
|
40
|
+
"import": "./dist/generate.js",
|
|
41
|
+
"default": "./dist/generate.js"
|
|
42
|
+
},
|
|
43
|
+
"./recipes": {
|
|
44
|
+
"types": "./dist/recipes.d.ts",
|
|
45
|
+
"import": "./dist/recipes.js",
|
|
46
|
+
"default": "./dist/recipes.js"
|
|
47
|
+
},
|
|
48
|
+
"./themes": {
|
|
49
|
+
"types": "./dist/themes.d.ts",
|
|
50
|
+
"import": "./dist/themes.js",
|
|
51
|
+
"default": "./dist/themes.js"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"files": [
|
|
55
|
+
"LICENSE",
|
|
56
|
+
"README.md",
|
|
57
|
+
"dist"
|
|
58
|
+
],
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"eslint": "^9.18.0",
|
|
61
|
+
"tsx": "^4.21.0",
|
|
62
|
+
"typescript": "^5",
|
|
63
|
+
"vitest": "^4.1.7",
|
|
64
|
+
"tsup": "^8.5.1",
|
|
65
|
+
"@rojao/config": "0.0.0"
|
|
66
|
+
},
|
|
67
|
+
"type": "module",
|
|
68
|
+
"publishConfig": {
|
|
69
|
+
"registry": "https://registry.npmjs.org",
|
|
70
|
+
"access": "public",
|
|
71
|
+
"provenance": true
|
|
72
|
+
},
|
|
73
|
+
"scripts": {
|
|
74
|
+
"build": "tsup",
|
|
75
|
+
"test": "vitest run",
|
|
76
|
+
"typecheck": "tsc --noEmit",
|
|
77
|
+
"lint": "eslint ."
|
|
78
|
+
}
|
|
79
|
+
}
|
package/dist/chunk-S5GNBSEX.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
// recipes/index.ts
|
|
2
|
-
var rojao = {
|
|
3
|
-
name: "rojao",
|
|
4
|
-
description: "Brand Roj\xE3o (loja). Neutro preto + accent green, Inter.",
|
|
5
|
-
brand: {
|
|
6
|
-
primary: "neutral-900",
|
|
7
|
-
hover: "neutral-700",
|
|
8
|
-
onPrimary: "white",
|
|
9
|
-
secondary: "white",
|
|
10
|
-
onSecondary: "neutral-900",
|
|
11
|
-
accent: "green-500",
|
|
12
|
-
accentLight: "green-50",
|
|
13
|
-
onAccent: "white"
|
|
14
|
-
},
|
|
15
|
-
surface: "neutral",
|
|
16
|
-
text: "neutral",
|
|
17
|
-
fonts: { body: "inter", display: "inter" }
|
|
18
|
-
};
|
|
19
|
-
var recipes = { rojao };
|
|
20
|
-
|
|
21
|
-
export { recipes, rojao };
|