A design system in a box.
hip-ui.tngl.io/docs/introduction
tweak cal
+12
-10
+4
-4
apps/docs/src/components/theme/useCalendarStyles.ts
+4
-4
apps/docs/src/components/theme/useCalendarStyles.ts
···
76
76
rangeCell: {
77
77
backgroundColor: {
78
78
":is(*)::before": "transparent",
79
-
":is([data-hovered]):not([data-unavailable])::before": uiColor.component2,
80
-
":is([data-pressed]):not([data-unavailable])::before": uiColor.component3,
79
+
":is([data-hovered]):not([data-unavailable])::before": uiColor.component3,
80
+
":is([data-pressed]):not([data-unavailable])::before": uiColor.border1,
81
81
":is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable])::before":
82
82
primaryColor.component1,
83
83
":is([data-selection-start],[data-selection-end]):not([data-unavailable])::before":
84
-
primaryColor.component2,
85
-
":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
86
84
primaryColor.component3,
85
+
":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
86
+
primaryColor.border1,
87
87
},
88
88
color: {
89
89
default: uiColor.text1,
+4
-2
apps/docs/stylex.css
+4
-2
apps/docs/stylex.css
···
1014
1014
.x101j2ex:is([data-direction=top][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--xi8gqyr)}
1015
1015
.x2lddy6:is([data-direction=left][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--xijpfl)}
1016
1016
.x6yz6ea:is(*):not(#\#):not(#\#):not(#\#)::before{background-color:transparent}
1017
+
.x1emykha:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--x11as8pt)}
1017
1018
.xn6ea36:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
1018
1019
.x1g50h58:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
1019
1020
.xy4szoh:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
···
1021
1022
.x1xns5du:is([data-react-aria-pressable=true]:not([data-disabled]):active *):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
1022
1023
.x1euotan:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
1023
1024
.x1xug95f:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--x11hgl6v)}
1025
+
.xxb6isr:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--x11hgl6v)}
1024
1026
.xfj4yhd:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x156ikib)}
1025
1027
.x1k1qyb7:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x156ikib)}
1026
1028
.x1ba4t6v:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x16ucms1)}
···
1036
1038
.x88gv2s:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--x1bs37nf)}
1037
1039
.xjolbuz:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x1crx5cu)}
1038
1040
.x17nc2bi:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x1e4ihis)}
1041
+
.x68x46h:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--x1gfz7lw)}
1039
1042
.xuo3b4b:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--x1ojhc7k)}
1040
1043
.x1dgkxin:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--x1qgqpcr)}
1041
1044
.x165wpnu:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x1ubhs74)}
···
1049
1052
.x1wqdp0q:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--xhtfb9k)}
1050
1053
.x15khubo:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--xhtfb9k)}
1051
1054
.x5p2wpg:is([data-selected]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--xhtfb9k)}
1052
-
.x2dd6ek:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--xhtfb9k)}
1055
+
.x1piovry:is([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xhtfb9k)}
1053
1056
.x10rfr9l:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--xi8u5z9)}
1054
1057
.xlok6xz:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--xi8u5z9)}
1055
1058
.x14f8q72:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--xkcrude)}
···
1060
1063
.x1sqr39f:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--xpnxlzk)}
1061
1064
.x1eiic7b:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--xpnxlzk)}
1062
1065
.x1on26w9:is([data-selected]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xpnxlzk)}
1063
-
.x1bi0gop:is([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xpnxlzk)}
1064
1066
.x17qi9bq:is([data-drop-target]):not(#\#):not(#\#):not(#\#){background-color:var(--xrqvod2)}
1065
1067
.x1892ph4:is([data-selected]):not(#\#):not(#\#):not(#\#){background-color:var(--xrqvod2)}
1066
1068
.x1ppgz80:is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xrqvod2)}
+4
-4
packages/hip-ui/src/components/theme/useCalendarStyles.ts
+4
-4
packages/hip-ui/src/components/theme/useCalendarStyles.ts
···
76
76
rangeCell: {
77
77
backgroundColor: {
78
78
":is(*)::before": "transparent",
79
-
":is([data-hovered]):not([data-unavailable])::before": uiColor.component2,
80
-
":is([data-pressed]):not([data-unavailable])::before": uiColor.component3,
79
+
":is([data-hovered]):not([data-unavailable])::before": uiColor.component3,
80
+
":is([data-pressed]):not([data-unavailable])::before": uiColor.border1,
81
81
":is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable])::before":
82
82
primaryColor.component1,
83
83
":is([data-selection-start],[data-selection-end]):not([data-unavailable])::before":
84
-
primaryColor.component2,
85
-
":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
86
84
primaryColor.component3,
85
+
":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
86
+
primaryColor.border1,
87
87
},
88
88
color: {
89
89
default: uiColor.text1,