@okshaun/components 2.0.0 → 2.0.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/index.js +65 -70
- package/dist/index.js.map +1 -1
- package/dist/panda.buildinfo.json +9 -6
- package/dist/{preset-Coz-VwQR.js → preset-Df8i1OIQ.js} +182 -145
- package/dist/preset-Df8i1OIQ.js.map +1 -0
- package/dist/preset.js +1 -1
- package/dist/specs/recipes.json +14 -6
- package/dist/specs/semantic-tokens.json +24 -38
- package/dist/specs/tokens.json +30 -40
- package/dist/sprite.symbol.html +1 -1
- package/dist/styles.css +181 -194
- package/dist/types/index.d.ts +9 -3
- package/package.json +1 -1
- package/src/recipes/button.ts +116 -86
- package/src/recipes/datePicker.ts +5 -16
- package/src/recipes/text.ts +12 -3
- package/src/styles/primitives/shadows.ts +24 -33
- package/src/styles/semantics/shadows.ts +27 -16
- package/dist/preset-Coz-VwQR.js.map +0 -1
package/dist/preset.js
CHANGED
package/dist/specs/recipes.json
CHANGED
|
@@ -283,7 +283,9 @@
|
|
|
283
283
|
"true"
|
|
284
284
|
]
|
|
285
285
|
},
|
|
286
|
-
"defaultVariants": {
|
|
286
|
+
"defaultVariants": {
|
|
287
|
+
"family": "inherit"
|
|
288
|
+
},
|
|
287
289
|
"functionExamples": [
|
|
288
290
|
"link({ family: 'heading' })",
|
|
289
291
|
"link({ bold: true })",
|
|
@@ -451,7 +453,9 @@
|
|
|
451
453
|
"black"
|
|
452
454
|
]
|
|
453
455
|
},
|
|
454
|
-
"defaultVariants": {
|
|
456
|
+
"defaultVariants": {
|
|
457
|
+
"family": "inherit"
|
|
458
|
+
},
|
|
455
459
|
"functionExamples": [
|
|
456
460
|
"text({ family: 'heading' })",
|
|
457
461
|
"text({ bold: true })",
|
|
@@ -622,11 +626,13 @@
|
|
|
622
626
|
"variant": [
|
|
623
627
|
"default",
|
|
624
628
|
"primary",
|
|
625
|
-
"hollow",
|
|
626
629
|
"ghost",
|
|
630
|
+
"subtle",
|
|
631
|
+
"hollow",
|
|
627
632
|
"danger",
|
|
628
633
|
"selected",
|
|
629
|
-
"selectedBold"
|
|
634
|
+
"selectedBold",
|
|
635
|
+
"selectedSubtle"
|
|
630
636
|
],
|
|
631
637
|
"size": [
|
|
632
638
|
"sm",
|
|
@@ -756,11 +762,13 @@
|
|
|
756
762
|
"variant": [
|
|
757
763
|
"default",
|
|
758
764
|
"primary",
|
|
759
|
-
"hollow",
|
|
760
765
|
"ghost",
|
|
766
|
+
"subtle",
|
|
767
|
+
"hollow",
|
|
761
768
|
"danger",
|
|
762
769
|
"selected",
|
|
763
|
-
"selectedBold"
|
|
770
|
+
"selectedBold",
|
|
771
|
+
"selectedSubtle"
|
|
764
772
|
],
|
|
765
773
|
"size": [
|
|
766
774
|
"sm",
|
|
@@ -2864,102 +2864,88 @@
|
|
|
2864
2864
|
"cssVar": "var(--oks-shadows-raised)"
|
|
2865
2865
|
},
|
|
2866
2866
|
{
|
|
2867
|
-
"name": "
|
|
2868
|
-
"values": [
|
|
2869
|
-
{
|
|
2870
|
-
"value": "{shadows.elevatedLight}",
|
|
2871
|
-
"condition": "base"
|
|
2872
|
-
},
|
|
2873
|
-
{
|
|
2874
|
-
"value": "{shadows.elevatedDark}",
|
|
2875
|
-
"condition": "dark"
|
|
2876
|
-
}
|
|
2877
|
-
],
|
|
2878
|
-
"cssVar": "var(--oks-shadows-elevated)"
|
|
2879
|
-
},
|
|
2880
|
-
{
|
|
2881
|
-
"name": "overlay",
|
|
2867
|
+
"name": "raised.up",
|
|
2882
2868
|
"values": [
|
|
2883
2869
|
{
|
|
2884
|
-
"value": "{shadows.
|
|
2870
|
+
"value": "{shadows.raisedLightUp}",
|
|
2885
2871
|
"condition": "base"
|
|
2886
2872
|
},
|
|
2887
2873
|
{
|
|
2888
|
-
"value": "{shadows.
|
|
2874
|
+
"value": "{shadows.raisedDarkUp}",
|
|
2889
2875
|
"condition": "dark"
|
|
2890
2876
|
}
|
|
2891
2877
|
],
|
|
2892
|
-
"cssVar": "var(--oks-shadows-
|
|
2878
|
+
"cssVar": "var(--oks-shadows-raised-up)"
|
|
2893
2879
|
},
|
|
2894
2880
|
{
|
|
2895
|
-
"name": "
|
|
2881
|
+
"name": "elevated",
|
|
2896
2882
|
"values": [
|
|
2897
2883
|
{
|
|
2898
|
-
"value": "{shadows.
|
|
2884
|
+
"value": "{shadows.elevatedLight}",
|
|
2899
2885
|
"condition": "base"
|
|
2900
2886
|
},
|
|
2901
2887
|
{
|
|
2902
|
-
"value": "{shadows.
|
|
2888
|
+
"value": "{shadows.elevatedDark}",
|
|
2903
2889
|
"condition": "dark"
|
|
2904
2890
|
}
|
|
2905
2891
|
],
|
|
2906
|
-
"cssVar": "var(--oks-shadows-
|
|
2892
|
+
"cssVar": "var(--oks-shadows-elevated)"
|
|
2907
2893
|
},
|
|
2908
2894
|
{
|
|
2909
|
-
"name": "
|
|
2895
|
+
"name": "elevated.up",
|
|
2910
2896
|
"values": [
|
|
2911
2897
|
{
|
|
2912
|
-
"value": "{shadows.
|
|
2898
|
+
"value": "{shadows.elevatedLightUp}",
|
|
2913
2899
|
"condition": "base"
|
|
2914
2900
|
},
|
|
2915
2901
|
{
|
|
2916
|
-
"value": "{shadows.
|
|
2902
|
+
"value": "{shadows.elevatedDarkUp}",
|
|
2917
2903
|
"condition": "dark"
|
|
2918
2904
|
}
|
|
2919
2905
|
],
|
|
2920
|
-
"cssVar": "var(--oks-shadows-
|
|
2906
|
+
"cssVar": "var(--oks-shadows-elevated-up)"
|
|
2921
2907
|
},
|
|
2922
2908
|
{
|
|
2923
|
-
"name": "
|
|
2909
|
+
"name": "overlay",
|
|
2924
2910
|
"values": [
|
|
2925
2911
|
{
|
|
2926
|
-
"value": "{shadows.
|
|
2912
|
+
"value": "{shadows.overlayLight}",
|
|
2927
2913
|
"condition": "base"
|
|
2928
2914
|
},
|
|
2929
2915
|
{
|
|
2930
|
-
"value": "{shadows.
|
|
2916
|
+
"value": "{shadows.overlayDark}",
|
|
2931
2917
|
"condition": "dark"
|
|
2932
2918
|
}
|
|
2933
2919
|
],
|
|
2934
|
-
"cssVar": "var(--oks-shadows-
|
|
2920
|
+
"cssVar": "var(--oks-shadows-overlay)"
|
|
2935
2921
|
},
|
|
2936
2922
|
{
|
|
2937
|
-
"name": "
|
|
2923
|
+
"name": "overlay.dark",
|
|
2938
2924
|
"values": [
|
|
2939
2925
|
{
|
|
2940
|
-
"value": "{shadows.
|
|
2926
|
+
"value": "{shadows.overlayDark}",
|
|
2941
2927
|
"condition": "base"
|
|
2942
2928
|
},
|
|
2943
2929
|
{
|
|
2944
|
-
"value": "{shadows.
|
|
2930
|
+
"value": "{shadows.overlayLight}",
|
|
2945
2931
|
"condition": "dark"
|
|
2946
2932
|
}
|
|
2947
2933
|
],
|
|
2948
|
-
"cssVar": "var(--oks-shadows-
|
|
2934
|
+
"cssVar": "var(--oks-shadows-overlay-dark)"
|
|
2949
2935
|
},
|
|
2950
2936
|
{
|
|
2951
|
-
"name": "
|
|
2937
|
+
"name": "overflow",
|
|
2952
2938
|
"values": [
|
|
2953
2939
|
{
|
|
2954
|
-
"value": "{shadows.
|
|
2940
|
+
"value": "{shadows.overflowLight}",
|
|
2955
2941
|
"condition": "base"
|
|
2956
2942
|
},
|
|
2957
2943
|
{
|
|
2958
|
-
"value": "{shadows.
|
|
2944
|
+
"value": "{shadows.overflowDark}",
|
|
2959
2945
|
"condition": "dark"
|
|
2960
2946
|
}
|
|
2961
2947
|
],
|
|
2962
|
-
"cssVar": "var(--oks-shadows-
|
|
2948
|
+
"cssVar": "var(--oks-shadows-overflow)"
|
|
2963
2949
|
}
|
|
2964
2950
|
],
|
|
2965
2951
|
"tokenFunctionExamples": [
|
package/dist/specs/tokens.json
CHANGED
|
@@ -2004,31 +2004,61 @@
|
|
|
2004
2004
|
"value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
|
|
2005
2005
|
"cssVar": "var(--oks-shadows-raised-light)"
|
|
2006
2006
|
},
|
|
2007
|
+
{
|
|
2008
|
+
"name": "raisedLightUp",
|
|
2009
|
+
"value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
|
|
2010
|
+
"cssVar": "var(--oks-shadows-raised-light-up)"
|
|
2011
|
+
},
|
|
2007
2012
|
{
|
|
2008
2013
|
"name": "raisedDark",
|
|
2009
2014
|
"value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
|
|
2010
2015
|
"cssVar": "var(--oks-shadows-raised-dark)"
|
|
2011
2016
|
},
|
|
2017
|
+
{
|
|
2018
|
+
"name": "raisedDarkUp",
|
|
2019
|
+
"value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
|
|
2020
|
+
"cssVar": "var(--oks-shadows-raised-dark-up)"
|
|
2021
|
+
},
|
|
2012
2022
|
{
|
|
2013
2023
|
"name": "elevatedLight",
|
|
2014
2024
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
|
|
2015
2025
|
"cssVar": "var(--oks-shadows-elevated-light)"
|
|
2016
2026
|
},
|
|
2027
|
+
{
|
|
2028
|
+
"name": "elevatedLightUp",
|
|
2029
|
+
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
|
|
2030
|
+
"cssVar": "var(--oks-shadows-elevated-light-up)"
|
|
2031
|
+
},
|
|
2017
2032
|
{
|
|
2018
2033
|
"name": "elevatedDark",
|
|
2019
2034
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
|
|
2020
2035
|
"cssVar": "var(--oks-shadows-elevated-dark)"
|
|
2021
2036
|
},
|
|
2037
|
+
{
|
|
2038
|
+
"name": "elevatedDarkUp",
|
|
2039
|
+
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
|
|
2040
|
+
"cssVar": "var(--oks-shadows-elevated-dark-up)"
|
|
2041
|
+
},
|
|
2022
2042
|
{
|
|
2023
2043
|
"name": "overlayLight",
|
|
2024
2044
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
|
|
2025
2045
|
"cssVar": "var(--oks-shadows-overlay-light)"
|
|
2026
2046
|
},
|
|
2047
|
+
{
|
|
2048
|
+
"name": "overlayLightUp",
|
|
2049
|
+
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
|
|
2050
|
+
"cssVar": "var(--oks-shadows-overlay-light-up)"
|
|
2051
|
+
},
|
|
2027
2052
|
{
|
|
2028
2053
|
"name": "overlayDark",
|
|
2029
2054
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
|
|
2030
2055
|
"cssVar": "var(--oks-shadows-overlay-dark)"
|
|
2031
2056
|
},
|
|
2057
|
+
{
|
|
2058
|
+
"name": "overlayDarkUp",
|
|
2059
|
+
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
|
|
2060
|
+
"cssVar": "var(--oks-shadows-overlay-dark-up)"
|
|
2061
|
+
},
|
|
2032
2062
|
{
|
|
2033
2063
|
"name": "overflowLight",
|
|
2034
2064
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-colors-shadow-overflow-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-light)",
|
|
@@ -2038,46 +2068,6 @@
|
|
|
2038
2068
|
"name": "overflowDark",
|
|
2039
2069
|
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) var(--oks-colors-shadow-overflow-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-dark)",
|
|
2040
2070
|
"cssVar": "var(--oks-shadows-overflow-dark)"
|
|
2041
|
-
},
|
|
2042
|
-
{
|
|
2043
|
-
"name": "lowLight",
|
|
2044
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2)",
|
|
2045
|
-
"cssVar": "var(--oks-shadows-low-light)"
|
|
2046
|
-
},
|
|
2047
|
-
{
|
|
2048
|
-
"name": "lowDark",
|
|
2049
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4)",
|
|
2050
|
-
"cssVar": "var(--oks-shadows-low-dark)"
|
|
2051
|
-
},
|
|
2052
|
-
{
|
|
2053
|
-
"name": "mediumLight",
|
|
2054
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2)",
|
|
2055
|
-
"cssVar": "var(--oks-shadows-medium-light)"
|
|
2056
|
-
},
|
|
2057
|
-
{
|
|
2058
|
-
"name": "mediumDark",
|
|
2059
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4)",
|
|
2060
|
-
"cssVar": "var(--oks-shadows-medium-dark)"
|
|
2061
|
-
},
|
|
2062
|
-
{
|
|
2063
|
-
"name": "highLight",
|
|
2064
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
|
|
2065
|
-
"cssVar": "var(--oks-shadows-high-light)"
|
|
2066
|
-
},
|
|
2067
|
-
{
|
|
2068
|
-
"name": "highDark",
|
|
2069
|
-
"value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
|
|
2070
|
-
"cssVar": "var(--oks-shadows-high-dark)"
|
|
2071
|
-
},
|
|
2072
|
-
{
|
|
2073
|
-
"name": "insetLight",
|
|
2074
|
-
"value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
|
|
2075
|
-
"cssVar": "var(--oks-shadows-inset-light)"
|
|
2076
|
-
},
|
|
2077
|
-
{
|
|
2078
|
-
"name": "insetDark",
|
|
2079
|
-
"value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
|
|
2080
|
-
"cssVar": "var(--oks-shadows-inset-dark)"
|
|
2081
2071
|
}
|
|
2082
2072
|
],
|
|
2083
2073
|
"tokenFunctionExamples": [
|
package/dist/sprite.symbol.html
CHANGED
|
@@ -4656,7 +4656,7 @@ embedded above. They may be styled via CSS.
|
|
|
4656
4656
|
|
|
4657
4657
|
<footer>
|
|
4658
4658
|
<p>
|
|
4659
|
-
Generated <span class="date">Thu, 26 Mar 2026
|
|
4659
|
+
Generated <span class="date">Thu, 26 Mar 2026 17:07:34 GMT</span> using
|
|
4660
4660
|
<a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.
|
|
4661
4661
|
</p>
|
|
4662
4662
|
</footer>
|