@rolemodel/optics
Version:
Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.
193 lines • 5.54 kB
JSON
{
"op": {
"color": {
"white": "hsl(0deg 100% 100%)",
"black": "hsl(0deg 0% 0%)",
"primary": {
"h": "216",
"s": "58%",
"l": "48%",
"original": "hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l))"
},
"neutral": {
"h": "var(--op-color-primary-h)",
"s": "4%",
"l": "var(--op-color-primary-l)",
"original": "hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l))"
},
"alerts": {
"warning": {
"h": "47",
"s": "100%",
"l": "61%",
"original": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l))"
},
"danger": {
"h": "0",
"s": "99%",
"l": "76%",
"original": "hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l))"
},
"info": {
"h": "216",
"s": "58%",
"l": "48%",
"original": "hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l))"
},
"notice": {
"h": "130",
"s": "61%",
"l": "64%",
"original": "hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l))"
}
},
"border": "var(--op-color-neutral-plus-five)",
"background": "var(--op-color-neutral-plus-eight)",
"on-background": "var(--op-color-neutral-on-plus-eight)"
},
"opacity": {
"none": "0",
"overlay": "0.2",
"disabled": "0.4",
"half": "0.5",
"full": "1"
},
"breakpoint": {
"x-small": "512px",
"small": "768px",
"medium": "1024px",
"large": "1280px",
"x-large": "1440px"
},
"radius": {
"small": "2px",
"medium": "4px",
"large": "8px",
"x-large": "12px",
"2x-large": "16px",
"circle": "50%",
"pill": "9999px"
},
"border": {
"width": "1px",
"width-large": "2px",
"width-x-large": "4px",
"none": "0 0 0 0",
"all": "0 0 0 var(--op-border-width)",
"top": "0 calc(-1 * var(--op-border-width)) 0 0",
"right": "var(--op-border-width) 0 0 0",
"bottom": "0 var(--op-border-width) 0 0",
"left": "calc(-1 * var(--op-border-width)) 0 0 0",
"y": "var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border)",
"x": "var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border)"
},
"font": {
"scale-unit": "1rem",
"2x-small": "calc(var(--op-font-scale-unit) * 1)",
"x-small": "calc(var(--op-font-scale-unit) * 1.2)",
"small": "calc(var(--op-font-scale-unit) * 1.4)",
"medium": "calc(var(--op-font-scale-unit) * 1.6)",
"large": "calc(var(--op-font-scale-unit) * 1.8)",
"x-large": "calc(var(--op-font-scale-unit) * 2)",
"2x-large": "calc(var(--op-font-scale-unit) * 2.4)",
"3x-large": "calc(var(--op-font-scale-unit) * 2.8)",
"4x-large": "calc(var(--op-font-scale-unit) * 3.2)",
"5x-large": "calc(var(--op-font-scale-unit) * 3.6)",
"6x": {
"large": "calc(var(--op-font-scale-unit) * 4.8)"
},
"weight": {
"thin": "100",
"extra-light": "200",
"light": "300",
"normal": "400",
"medium": "500",
"semi-bold": "600",
"bold": "700",
"extra-bold": "800",
"black": "900"
},
"family": "'Noto Sans', sans-serif"
},
"line-height": {
"none": "0",
"densest": "1",
"denser": "1.15",
"dense": "1.3",
"base": "1.5",
"loose": "1.6",
"looser": "1.7",
"loosest": "1.8"
},
"letter-spacing": {
"navigation": "0.01rem",
"label": "0.04rem"
},
"transition": {
"accordion": "rotate 120ms ease-in",
"input": "all 120ms ease-in",
"sidebar": "all 200ms ease-in-out",
"modal": "all 300ms ease-in",
"panel": "right 400ms ease-in",
"tooltip": "all 300ms ease-in 300ms"
},
"animation": {
"flash": "rm-slide-in-out-flash 5s normal forwards"
},
"encoded": {
"images": {
"dropdown": {
"arrow": "url('data"
}
}
},
"size": {
"unit": "0.4rem"
},
"space": {
"scale-unit": "1rem",
"3x-small": "calc(var(--op-space-scale-unit) * 0.2)",
"2x-small": "calc(var(--op-space-scale-unit) * 0.4)",
"x-small": "calc(var(--op-space-scale-unit) * 0.8)",
"small": "calc(var(--op-space-scale-unit) * 1.2)",
"medium": "calc(var(--op-space-scale-unit) * 1.6)",
"large": "calc(var(--op-space-scale-unit) * 2)",
"x-large": "calc(var(--op-space-scale-unit) * 2.4)",
"2x-large": "calc(var(--op-space-scale-unit) * 2.8)",
"3x-large": "calc(var(--op-space-scale-unit) * 4)",
"4x-large": "calc(var(--op-space-scale-unit) * 8)"
},
"shadow": {
"x-small": "0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%)",
"small": "0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%)",
"medium": "0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%)",
"large": "0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%)",
"x-large": "0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%)"
},
"z-index": {
"header": "500",
"footer": "500",
"sidebar": "700",
"dialog": "800",
"dialog-backdrop": "801",
"dialog-content": "802",
"dropdown": "900",
"alert-group": "950",
"tooltip": "1000"
},
"input-height": {
"small": "2.8rem",
"medium": "3.6rem",
"large": "4rem",
"x-large": "8.4rem"
},
"input": {
"inner": {
"focus": "inset 0 0 0 var(--op-border-width-large)"
},
"outer": {
"focus": "0 0 0 var(--op-border-width-x-large)"
}
}
}
}