@vygruppen/spor-react 9.0.2 → 9.1.0

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.
Files changed (11) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +17 -0
  3. package/dist/{CountryCodeSelect-ANZFGZSX.mjs → CountryCodeSelect-N6JNGXLL.mjs} +1 -1
  4. package/dist/{chunk-A5E3F3T5.mjs → chunk-AS7NY5TY.mjs} +11 -9
  5. package/dist/index.d.mts +278 -9
  6. package/dist/index.d.ts +278 -9
  7. package/dist/index.js +11 -10
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/theme/components/card.ts +6 -5
  11. package/src/theme/index.ts +5 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.0.2 build
2
+ > @vygruppen/spor-react@9.1.0 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 487.81 KB
13
- CJS ⚡️ Build success in 2121ms
12
+ CJS dist/index.js 487.93 KB
13
+ CJS ⚡️ Build success in 2091ms
14
14
  ESM dist/index.mjs 2.02 KB
15
- ESM dist/CountryCodeSelect-ANZFGZSX.mjs 1.19 KB
16
- ESM dist/chunk-A5E3F3T5.mjs 381.87 KB
17
- ESM ⚡️ Build success in 2123ms
18
- DTS ⚡️ Build success in 10634ms
19
- DTS dist/index.d.ts 307.91 KB
20
- DTS dist/index.d.mts 307.91 KB
15
+ ESM dist/CountryCodeSelect-N6JNGXLL.mjs 1.19 KB
16
+ ESM dist/chunk-AS7NY5TY.mjs 381.97 KB
17
+ ESM ⚡️ Build success in 2092ms
18
+ DTS ⚡️ Build success in 11787ms
19
+ DTS dist/index.d.ts 318.33 KB
20
+ DTS dist/index.d.mts 318.33 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6fe2534: Add support for Brand.CargoNet
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [6fe2534]
12
+ - @vygruppen/spor-design-tokens@3.5.0
13
+
14
+ ## 9.0.3
15
+
16
+ ### Patch Changes
17
+
18
+ - 51ff0e7: Card: Fix wrong colors on white card outlines in dark mode
19
+
3
20
  ## 9.0.2
4
21
 
5
22
  ### Patch Changes
package/dist/{CountryCodeSelect-ANZFGZSX.mjs → CountryCodeSelect-N6JNGXLL.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-A5E3F3T5.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-AS7NY5TY.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-A5E3F3T5.mjs → chunk-AS7NY5TY.mjs} RENAMED
@@ -3340,7 +3340,7 @@ var texts14 = createTexts({
3340
3340
  sv: "Telefonnummer"
3341
3341
  }
3342
3342
  });
3343
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-ANZFGZSX.mjs'));
3343
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-N6JNGXLL.mjs'));
3344
3344
  var Radio = forwardRef((props, ref) => {
3345
3345
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3346
3346
  });
@@ -10385,8 +10385,8 @@ var shadows2 = {
10385
10385
  lg: tokens10__default.depth.shadow.lg.value
10386
10386
  };
10387
10387
  var spacing2 = Object.entries(tokens10__default.size.spacing).reduce(
10388
- (tokens14, [key, token]) => ({
10389
- ...tokens14,
10388
+ (tokens15, [key, token]) => ({
10389
+ ...tokens15,
10390
10390
  [Number(key)]: token
10391
10391
  }),
10392
10392
  {}
@@ -10581,8 +10581,7 @@ var getColorSchemeBaseProps = (props) => {
10581
10581
  switch (props.colorScheme) {
10582
10582
  case "white":
10583
10583
  return {
10584
- outline: "1px solid",
10585
- outlineColor: "silver",
10584
+ ...baseBorder("default", props),
10586
10585
  backgroundColor: mode(
10587
10586
  "white",
10588
10587
  `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
@@ -10614,7 +10613,7 @@ function getColorSchemeClickableProps(props) {
10614
10613
  switch (props.colorScheme) {
10615
10614
  case "white":
10616
10615
  return {
10617
- outlineColor: "silver"
10616
+ ...floatingBorder("default", props)
10618
10617
  };
10619
10618
  case "grey":
10620
10619
  return {
@@ -10636,7 +10635,7 @@ var getColorSchemeHoverProps = (props) => {
10636
10635
  "white",
10637
10636
  `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
10638
10637
  )(props),
10639
- outlineColor: "steel"
10638
+ ...floatingBorder("hover", props)
10640
10639
  };
10641
10640
  case "grey":
10642
10641
  return {
@@ -10656,7 +10655,7 @@ var getColorSchemeActiveProps = (props) => {
10656
10655
  case "white":
10657
10656
  return {
10658
10657
  backgroundColor: mode("mint", "teal")(props),
10659
- outlineColor: "silver"
10658
+ ...floatingBorder("active", props)
10660
10659
  };
10661
10660
  case "grey":
10662
10661
  return {
@@ -13255,6 +13254,7 @@ var fontFaces = `
13255
13254
  var Brand = /* @__PURE__ */ ((Brand2) => {
13256
13255
  Brand2["VyDigital"] = "VyDigital";
13257
13256
  Brand2["VyUtvikling"] = "VyUtvikling";
13257
+ Brand2["CargoNet"] = "CargoNet";
13258
13258
  return Brand2;
13259
13259
  })(Brand || {});
13260
13260
  var theme = {
@@ -13272,12 +13272,14 @@ var brandTheme = {
13272
13272
  accent: {
13273
13273
  surface: {
13274
13274
  default: {
13275
- light: colors2.seaMist,
13276
13275
  dark: colors2.darkGrey
13277
13276
  }
13278
13277
  }
13279
13278
  }
13280
13279
  }
13280
+ },
13281
+ ["CargoNet" /* CargoNet */]: {
13282
+ colors: tokens10__default.color.cargonet
13281
13283
  }
13282
13284
  };
13283
13285
  var BaseToast = ({ children, variant, id }) => {
package/dist/index.d.mts CHANGED
@@ -404,7 +404,7 @@ type FloatingActionButtonProps = BoxProps & {
404
404
  * placement="bottom right"
405
405
  * />
406
406
  */
407
- declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
407
+ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
408
408
 
409
409
  type CardProps = Exclude<BoxProps, "size"> & {
410
410
  size?: "sm" | "lg";
@@ -2127,7 +2127,8 @@ declare const fontFaces: string;
2127
2127
 
2128
2128
  declare enum Brand {
2129
2129
  VyDigital = "VyDigital",
2130
- VyUtvikling = "VyUtvikling"
2130
+ VyUtvikling = "VyUtvikling",
2131
+ CargoNet = "CargoNet"
2131
2132
  }
2132
2133
  declare const theme: {
2133
2134
  components: {
@@ -2693,13 +2694,65 @@ declare const theme: {
2693
2694
  baseStyle?: ((props: any) => {
2694
2695
  "button&, a&, label&, &.is-clickable": {
2695
2696
  _hover: {
2697
+ outline: string;
2698
+ outlineColor: string;
2699
+ backgroundColor: string;
2700
+ } | {
2701
+ outlineColor: string;
2702
+ backgroundColor?: undefined;
2703
+ } | {
2704
+ backgroundColor: string;
2705
+ outlineColor: string;
2706
+ };
2707
+ _active: {
2708
+ outline: string;
2709
+ outlineColor: string;
2696
2710
  backgroundColor: string;
2711
+ } | {
2712
+ backgroundColor: string;
2713
+ outlineColor: string;
2714
+ };
2715
+ _disabled: {
2716
+ pointerEvents: string;
2717
+ color: string;
2718
+ outlineWidth: string;
2719
+ outlineColor: string;
2720
+ outlineStyle: string;
2721
+ outlineOffset: string;
2722
+ backgroundColor: string;
2723
+ } | {
2724
+ pointerEvents: string;
2725
+ color: string;
2726
+ outline: string;
2727
+ outlineColor: string;
2728
+ backgroundColor: string;
2729
+ };
2730
+ _focusVisible: {
2731
+ outlineWidth: string;
2732
+ outlineColor: string;
2733
+ outlineStyle: string;
2734
+ outlineOffset: string;
2735
+ };
2736
+ outline: string;
2737
+ outlineColor: string;
2738
+ backgroundColor?: undefined;
2739
+ } | {
2740
+ _hover: {
2741
+ outline: string;
2697
2742
  outlineColor: string;
2743
+ backgroundColor: string;
2698
2744
  } | {
2699
2745
  outlineColor: string;
2700
2746
  backgroundColor?: undefined;
2747
+ } | {
2748
+ backgroundColor: string;
2749
+ outlineColor: string;
2701
2750
  };
2702
2751
  _active: {
2752
+ outline: string;
2753
+ outlineColor: string;
2754
+ backgroundColor: string;
2755
+ } | {
2703
2756
  backgroundColor: string;
2704
2757
  outlineColor: string;
2705
2758
  };
@@ -2729,13 +2782,21 @@ declare const theme: {
2729
2782
  outline: string;
2730
2783
  } | {
2731
2784
  _hover: {
2732
- backgroundColor: string;
2785
+ outline: string;
2733
2786
  outlineColor: string;
2787
+ backgroundColor: string;
2734
2788
  } | {
2735
2789
  outlineColor: string;
2736
2790
  backgroundColor?: undefined;
2791
+ } | {
2792
+ backgroundColor: string;
2793
+ outlineColor: string;
2737
2794
  };
2738
2795
  _active: {
2796
+ outline: string;
2797
+ outlineColor: string;
2798
+ backgroundColor: string;
2799
+ } | {
2739
2800
  backgroundColor: string;
2740
2801
  outlineColor: string;
2741
2802
  };
@@ -2764,10 +2825,12 @@ declare const theme: {
2764
2825
  outlineColor: string;
2765
2826
  outline: string;
2766
2827
  };
2767
- outline: string;
2768
- outlineColor: string;
2769
2828
  backgroundColor: string;
2770
2829
  color: string;
2830
+ outlineWidth: string;
2831
+ outlineColor: string;
2832
+ outlineStyle: string;
2833
+ outlineOffset: string;
2771
2834
  appearance: string;
2772
2835
  border: string;
2773
2836
  overflow: string;
@@ -2779,13 +2842,65 @@ declare const theme: {
2779
2842
  } | {
2780
2843
  "button&, a&, label&, &.is-clickable": {
2781
2844
  _hover: {
2845
+ outline: string;
2846
+ outlineColor: string;
2782
2847
  backgroundColor: string;
2848
+ } | {
2849
+ outlineColor: string;
2850
+ backgroundColor?: undefined;
2851
+ } | {
2852
+ backgroundColor: string;
2853
+ outlineColor: string;
2854
+ };
2855
+ _active: {
2856
+ outline: string;
2783
2857
  outlineColor: string;
2858
+ backgroundColor: string;
2859
+ } | {
2860
+ backgroundColor: string;
2861
+ outlineColor: string;
2862
+ };
2863
+ _disabled: {
2864
+ pointerEvents: string;
2865
+ color: string;
2866
+ outlineWidth: string;
2867
+ outlineColor: string;
2868
+ outlineStyle: string;
2869
+ outlineOffset: string;
2870
+ backgroundColor: string;
2871
+ } | {
2872
+ pointerEvents: string;
2873
+ color: string;
2874
+ outline: string;
2875
+ outlineColor: string;
2876
+ backgroundColor: string;
2877
+ };
2878
+ _focusVisible: {
2879
+ outlineWidth: string;
2880
+ outlineColor: string;
2881
+ outlineStyle: string;
2882
+ outlineOffset: string;
2883
+ };
2884
+ outline: string;
2885
+ outlineColor: string;
2886
+ backgroundColor?: undefined;
2887
+ } | {
2888
+ _hover: {
2889
+ outline: string;
2890
+ outlineColor: string;
2891
+ backgroundColor: string;
2784
2892
  } | {
2785
2893
  outlineColor: string;
2786
2894
  backgroundColor?: undefined;
2895
+ } | {
2896
+ backgroundColor: string;
2897
+ outlineColor: string;
2787
2898
  };
2788
2899
  _active: {
2900
+ outline: string;
2901
+ outlineColor: string;
2902
+ backgroundColor: string;
2903
+ } | {
2789
2904
  backgroundColor: string;
2790
2905
  outlineColor: string;
2791
2906
  };
@@ -2815,13 +2930,21 @@ declare const theme: {
2815
2930
  outline: string;
2816
2931
  } | {
2817
2932
  _hover: {
2818
- backgroundColor: string;
2933
+ outline: string;
2819
2934
  outlineColor: string;
2935
+ backgroundColor: string;
2820
2936
  } | {
2821
2937
  outlineColor: string;
2822
2938
  backgroundColor?: undefined;
2939
+ } | {
2940
+ backgroundColor: string;
2941
+ outlineColor: string;
2823
2942
  };
2824
2943
  _active: {
2944
+ outline: string;
2945
+ outlineColor: string;
2946
+ backgroundColor: string;
2947
+ } | {
2825
2948
  backgroundColor: string;
2826
2949
  outlineColor: string;
2827
2950
  };
@@ -2851,9 +2974,9 @@ declare const theme: {
2851
2974
  outline: string;
2852
2975
  };
2853
2976
  backgroundColor: string;
2854
- outline?: undefined;
2855
- outlineColor?: undefined;
2856
2977
  color: string;
2978
+ outline: string;
2979
+ outlineColor: string;
2857
2980
  appearance: string;
2858
2981
  border: string;
2859
2982
  overflow: string;
@@ -2862,6 +2985,150 @@ declare const theme: {
2862
2985
  transitionProperty: string;
2863
2986
  transitionDuration: string;
2864
2987
  borderRadius: string;
2988
+ } | {
2989
+ "button&, a&, label&, &.is-clickable": {
2990
+ _hover: {
2991
+ outline: string;
2992
+ outlineColor: string;
2993
+ backgroundColor: string;
2994
+ } | {
2995
+ outlineColor: string;
2996
+ backgroundColor?: undefined;
2997
+ } | {
2998
+ backgroundColor: string;
2999
+ outlineColor: string;
3000
+ };
3001
+ _active: {
3002
+ outline: string;
3003
+ outlineColor: string;
3004
+ backgroundColor: string;
3005
+ } | {
3006
+ backgroundColor: string;
3007
+ outlineColor: string;
3008
+ };
3009
+ _disabled: {
3010
+ pointerEvents: string;
3011
+ color: string;
3012
+ outlineWidth: string;
3013
+ outlineColor: string;
3014
+ outlineStyle: string;
3015
+ outlineOffset: string;
3016
+ backgroundColor: string;
3017
+ } | {
3018
+ pointerEvents: string;
3019
+ color: string;
3020
+ outline: string;
3021
+ outlineColor: string;
3022
+ backgroundColor: string;
3023
+ };
3024
+ _focusVisible: {
3025
+ outlineWidth: string;
3026
+ outlineColor: string;
3027
+ outlineStyle: string;
3028
+ outlineOffset: string;
3029
+ };
3030
+ outline: string;
3031
+ outlineColor: string;
3032
+ backgroundColor?: undefined;
3033
+ } | {
3034
+ _hover: {
3035
+ outline: string;
3036
+ outlineColor: string;
3037
+ backgroundColor: string;
3038
+ } | {
3039
+ outlineColor: string;
3040
+ backgroundColor?: undefined;
3041
+ } | {
3042
+ backgroundColor: string;
3043
+ outlineColor: string;
3044
+ };
3045
+ _active: {
3046
+ outline: string;
3047
+ outlineColor: string;
3048
+ backgroundColor: string;
3049
+ } | {
3050
+ backgroundColor: string;
3051
+ outlineColor: string;
3052
+ };
3053
+ _disabled: {
3054
+ pointerEvents: string;
3055
+ color: string;
3056
+ outlineWidth: string;
3057
+ outlineColor: string;
3058
+ outlineStyle: string;
3059
+ outlineOffset: string;
3060
+ backgroundColor: string;
3061
+ } | {
3062
+ pointerEvents: string;
3063
+ color: string;
3064
+ outline: string;
3065
+ outlineColor: string;
3066
+ backgroundColor: string;
3067
+ };
3068
+ _focusVisible: {
3069
+ outlineWidth: string;
3070
+ outlineColor: string;
3071
+ outlineStyle: string;
3072
+ outlineOffset: string;
3073
+ };
3074
+ outlineColor: string;
3075
+ backgroundColor?: undefined;
3076
+ outline: string;
3077
+ } | {
3078
+ _hover: {
3079
+ outline: string;
3080
+ outlineColor: string;
3081
+ backgroundColor: string;
3082
+ } | {
3083
+ outlineColor: string;
3084
+ backgroundColor?: undefined;
3085
+ } | {
3086
+ backgroundColor: string;
3087
+ outlineColor: string;
3088
+ };
3089
+ _active: {
3090
+ outline: string;
3091
+ outlineColor: string;
3092
+ backgroundColor: string;
3093
+ } | {
3094
+ backgroundColor: string;
3095
+ outlineColor: string;
3096
+ };
3097
+ _disabled: {
3098
+ pointerEvents: string;
3099
+ color: string;
3100
+ outlineWidth: string;
3101
+ outlineColor: string;
3102
+ outlineStyle: string;
3103
+ outlineOffset: string;
3104
+ backgroundColor: string;
3105
+ } | {
3106
+ pointerEvents: string;
3107
+ color: string;
3108
+ outline: string;
3109
+ outlineColor: string;
3110
+ backgroundColor: string;
3111
+ };
3112
+ _focusVisible: {
3113
+ outlineWidth: string;
3114
+ outlineColor: string;
3115
+ outlineStyle: string;
3116
+ outlineOffset: string;
3117
+ };
3118
+ backgroundColor: string;
3119
+ outlineColor: string;
3120
+ outline: string;
3121
+ };
3122
+ backgroundColor: string;
3123
+ appearance: string;
3124
+ border: string;
3125
+ overflow: string;
3126
+ fontSize: string;
3127
+ display: string;
3128
+ transitionProperty: string;
3129
+ transitionDuration: string;
3130
+ borderRadius: string;
3131
+ color: string;
2865
3132
  }) | undefined;
2866
3133
  sizes?: {
2867
3134
  sm: {
@@ -8422,13 +8689,15 @@ declare const brandTheme: {
8422
8689
  accent: {
8423
8690
  surface: {
8424
8691
  default: {
8425
- light: string;
8426
8692
  dark: string;
8427
8693
  };
8428
8694
  };
8429
8695
  };
8430
8696
  };
8431
8697
  };
8698
+ CargoNet: {
8699
+ colors: any;
8700
+ };
8432
8701
  };
8433
8702
 
8434
8703
  type BaseToastProps = {
package/dist/index.d.ts CHANGED
@@ -404,7 +404,7 @@ type FloatingActionButtonProps = BoxProps & {
404
404
  * placement="bottom right"
405
405
  * />
406
406
  */
407
- declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
407
+ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
408
408
 
409
409
  type CardProps = Exclude<BoxProps, "size"> & {
410
410
  size?: "sm" | "lg";
@@ -2127,7 +2127,8 @@ declare const fontFaces: string;
2127
2127
 
2128
2128
  declare enum Brand {
2129
2129
  VyDigital = "VyDigital",
2130
- VyUtvikling = "VyUtvikling"
2130
+ VyUtvikling = "VyUtvikling",
2131
+ CargoNet = "CargoNet"
2131
2132
  }
2132
2133
  declare const theme: {
2133
2134
  components: {
@@ -2693,13 +2694,65 @@ declare const theme: {
2693
2694
  baseStyle?: ((props: any) => {
2694
2695
  "button&, a&, label&, &.is-clickable": {
2695
2696
  _hover: {
2697
+ outline: string;
2698
+ outlineColor: string;
2699
+ backgroundColor: string;
2700
+ } | {
2701
+ outlineColor: string;
2702
+ backgroundColor?: undefined;
2703
+ } | {
2704
+ backgroundColor: string;
2705
+ outlineColor: string;
2706
+ };
2707
+ _active: {
2708
+ outline: string;
2709
+ outlineColor: string;
2696
2710
  backgroundColor: string;
2711
+ } | {
2712
+ backgroundColor: string;
2713
+ outlineColor: string;
2714
+ };
2715
+ _disabled: {
2716
+ pointerEvents: string;
2717
+ color: string;
2718
+ outlineWidth: string;
2719
+ outlineColor: string;
2720
+ outlineStyle: string;
2721
+ outlineOffset: string;
2722
+ backgroundColor: string;
2723
+ } | {
2724
+ pointerEvents: string;
2725
+ color: string;
2726
+ outline: string;
2727
+ outlineColor: string;
2728
+ backgroundColor: string;
2729
+ };
2730
+ _focusVisible: {
2731
+ outlineWidth: string;
2732
+ outlineColor: string;
2733
+ outlineStyle: string;
2734
+ outlineOffset: string;
2735
+ };
2736
+ outline: string;
2737
+ outlineColor: string;
2738
+ backgroundColor?: undefined;
2739
+ } | {
2740
+ _hover: {
2741
+ outline: string;
2697
2742
  outlineColor: string;
2743
+ backgroundColor: string;
2698
2744
  } | {
2699
2745
  outlineColor: string;
2700
2746
  backgroundColor?: undefined;
2747
+ } | {
2748
+ backgroundColor: string;
2749
+ outlineColor: string;
2701
2750
  };
2702
2751
  _active: {
2752
+ outline: string;
2753
+ outlineColor: string;
2754
+ backgroundColor: string;
2755
+ } | {
2703
2756
  backgroundColor: string;
2704
2757
  outlineColor: string;
2705
2758
  };
@@ -2729,13 +2782,21 @@ declare const theme: {
2729
2782
  outline: string;
2730
2783
  } | {
2731
2784
  _hover: {
2732
- backgroundColor: string;
2785
+ outline: string;
2733
2786
  outlineColor: string;
2787
+ backgroundColor: string;
2734
2788
  } | {
2735
2789
  outlineColor: string;
2736
2790
  backgroundColor?: undefined;
2791
+ } | {
2792
+ backgroundColor: string;
2793
+ outlineColor: string;
2737
2794
  };
2738
2795
  _active: {
2796
+ outline: string;
2797
+ outlineColor: string;
2798
+ backgroundColor: string;
2799
+ } | {
2739
2800
  backgroundColor: string;
2740
2801
  outlineColor: string;
2741
2802
  };
@@ -2764,10 +2825,12 @@ declare const theme: {
2764
2825
  outlineColor: string;
2765
2826
  outline: string;
2766
2827
  };
2767
- outline: string;
2768
- outlineColor: string;
2769
2828
  backgroundColor: string;
2770
2829
  color: string;
2830
+ outlineWidth: string;
2831
+ outlineColor: string;
2832
+ outlineStyle: string;
2833
+ outlineOffset: string;
2771
2834
  appearance: string;
2772
2835
  border: string;
2773
2836
  overflow: string;
@@ -2779,13 +2842,65 @@ declare const theme: {
2779
2842
  } | {
2780
2843
  "button&, a&, label&, &.is-clickable": {
2781
2844
  _hover: {
2845
+ outline: string;
2846
+ outlineColor: string;
2782
2847
  backgroundColor: string;
2848
+ } | {
2849
+ outlineColor: string;
2850
+ backgroundColor?: undefined;
2851
+ } | {
2852
+ backgroundColor: string;
2853
+ outlineColor: string;
2854
+ };
2855
+ _active: {
2856
+ outline: string;
2783
2857
  outlineColor: string;
2858
+ backgroundColor: string;
2859
+ } | {
2860
+ backgroundColor: string;
2861
+ outlineColor: string;
2862
+ };
2863
+ _disabled: {
2864
+ pointerEvents: string;
2865
+ color: string;
2866
+ outlineWidth: string;
2867
+ outlineColor: string;
2868
+ outlineStyle: string;
2869
+ outlineOffset: string;
2870
+ backgroundColor: string;
2871
+ } | {
2872
+ pointerEvents: string;
2873
+ color: string;
2874
+ outline: string;
2875
+ outlineColor: string;
2876
+ backgroundColor: string;
2877
+ };
2878
+ _focusVisible: {
2879
+ outlineWidth: string;
2880
+ outlineColor: string;
2881
+ outlineStyle: string;
2882
+ outlineOffset: string;
2883
+ };
2884
+ outline: string;
2885
+ outlineColor: string;
2886
+ backgroundColor?: undefined;
2887
+ } | {
2888
+ _hover: {
2889
+ outline: string;
2890
+ outlineColor: string;
2891
+ backgroundColor: string;
2784
2892
  } | {
2785
2893
  outlineColor: string;
2786
2894
  backgroundColor?: undefined;
2895
+ } | {
2896
+ backgroundColor: string;
2897
+ outlineColor: string;
2787
2898
  };
2788
2899
  _active: {
2900
+ outline: string;
2901
+ outlineColor: string;
2902
+ backgroundColor: string;
2903
+ } | {
2789
2904
  backgroundColor: string;
2790
2905
  outlineColor: string;
2791
2906
  };
@@ -2815,13 +2930,21 @@ declare const theme: {
2815
2930
  outline: string;
2816
2931
  } | {
2817
2932
  _hover: {
2818
- backgroundColor: string;
2933
+ outline: string;
2819
2934
  outlineColor: string;
2935
+ backgroundColor: string;
2820
2936
  } | {
2821
2937
  outlineColor: string;
2822
2938
  backgroundColor?: undefined;
2939
+ } | {
2940
+ backgroundColor: string;
2941
+ outlineColor: string;
2823
2942
  };
2824
2943
  _active: {
2944
+ outline: string;
2945
+ outlineColor: string;
2946
+ backgroundColor: string;
2947
+ } | {
2825
2948
  backgroundColor: string;
2826
2949
  outlineColor: string;
2827
2950
  };
@@ -2851,9 +2974,9 @@ declare const theme: {
2851
2974
  outline: string;
2852
2975
  };
2853
2976
  backgroundColor: string;
2854
- outline?: undefined;
2855
- outlineColor?: undefined;
2856
2977
  color: string;
2978
+ outline: string;
2979
+ outlineColor: string;
2857
2980
  appearance: string;
2858
2981
  border: string;
2859
2982
  overflow: string;
@@ -2862,6 +2985,150 @@ declare const theme: {
2862
2985
  transitionProperty: string;
2863
2986
  transitionDuration: string;
2864
2987
  borderRadius: string;
2988
+ } | {
2989
+ "button&, a&, label&, &.is-clickable": {
2990
+ _hover: {
2991
+ outline: string;
2992
+ outlineColor: string;
2993
+ backgroundColor: string;
2994
+ } | {
2995
+ outlineColor: string;
2996
+ backgroundColor?: undefined;
2997
+ } | {
2998
+ backgroundColor: string;
2999
+ outlineColor: string;
3000
+ };
3001
+ _active: {
3002
+ outline: string;
3003
+ outlineColor: string;
3004
+ backgroundColor: string;
3005
+ } | {
3006
+ backgroundColor: string;
3007
+ outlineColor: string;
3008
+ };
3009
+ _disabled: {
3010
+ pointerEvents: string;
3011
+ color: string;
3012
+ outlineWidth: string;
3013
+ outlineColor: string;
3014
+ outlineStyle: string;
3015
+ outlineOffset: string;
3016
+ backgroundColor: string;
3017
+ } | {
3018
+ pointerEvents: string;
3019
+ color: string;
3020
+ outline: string;
3021
+ outlineColor: string;
3022
+ backgroundColor: string;
3023
+ };
3024
+ _focusVisible: {
3025
+ outlineWidth: string;
3026
+ outlineColor: string;
3027
+ outlineStyle: string;
3028
+ outlineOffset: string;
3029
+ };
3030
+ outline: string;
3031
+ outlineColor: string;
3032
+ backgroundColor?: undefined;
3033
+ } | {
3034
+ _hover: {
3035
+ outline: string;
3036
+ outlineColor: string;
3037
+ backgroundColor: string;
3038
+ } | {
3039
+ outlineColor: string;
3040
+ backgroundColor?: undefined;
3041
+ } | {
3042
+ backgroundColor: string;
3043
+ outlineColor: string;
3044
+ };
3045
+ _active: {
3046
+ outline: string;
3047
+ outlineColor: string;
3048
+ backgroundColor: string;
3049
+ } | {
3050
+ backgroundColor: string;
3051
+ outlineColor: string;
3052
+ };
3053
+ _disabled: {
3054
+ pointerEvents: string;
3055
+ color: string;
3056
+ outlineWidth: string;
3057
+ outlineColor: string;
3058
+ outlineStyle: string;
3059
+ outlineOffset: string;
3060
+ backgroundColor: string;
3061
+ } | {
3062
+ pointerEvents: string;
3063
+ color: string;
3064
+ outline: string;
3065
+ outlineColor: string;
3066
+ backgroundColor: string;
3067
+ };
3068
+ _focusVisible: {
3069
+ outlineWidth: string;
3070
+ outlineColor: string;
3071
+ outlineStyle: string;
3072
+ outlineOffset: string;
3073
+ };
3074
+ outlineColor: string;
3075
+ backgroundColor?: undefined;
3076
+ outline: string;
3077
+ } | {
3078
+ _hover: {
3079
+ outline: string;
3080
+ outlineColor: string;
3081
+ backgroundColor: string;
3082
+ } | {
3083
+ outlineColor: string;
3084
+ backgroundColor?: undefined;
3085
+ } | {
3086
+ backgroundColor: string;
3087
+ outlineColor: string;
3088
+ };
3089
+ _active: {
3090
+ outline: string;
3091
+ outlineColor: string;
3092
+ backgroundColor: string;
3093
+ } | {
3094
+ backgroundColor: string;
3095
+ outlineColor: string;
3096
+ };
3097
+ _disabled: {
3098
+ pointerEvents: string;
3099
+ color: string;
3100
+ outlineWidth: string;
3101
+ outlineColor: string;
3102
+ outlineStyle: string;
3103
+ outlineOffset: string;
3104
+ backgroundColor: string;
3105
+ } | {
3106
+ pointerEvents: string;
3107
+ color: string;
3108
+ outline: string;
3109
+ outlineColor: string;
3110
+ backgroundColor: string;
3111
+ };
3112
+ _focusVisible: {
3113
+ outlineWidth: string;
3114
+ outlineColor: string;
3115
+ outlineStyle: string;
3116
+ outlineOffset: string;
3117
+ };
3118
+ backgroundColor: string;
3119
+ outlineColor: string;
3120
+ outline: string;
3121
+ };
3122
+ backgroundColor: string;
3123
+ appearance: string;
3124
+ border: string;
3125
+ overflow: string;
3126
+ fontSize: string;
3127
+ display: string;
3128
+ transitionProperty: string;
3129
+ transitionDuration: string;
3130
+ borderRadius: string;
3131
+ color: string;
2865
3132
  }) | undefined;
2866
3133
  sizes?: {
2867
3134
  sm: {
@@ -8422,13 +8689,15 @@ declare const brandTheme: {
8422
8689
  accent: {
8423
8690
  surface: {
8424
8691
  default: {
8425
- light: string;
8426
8692
  dark: string;
8427
8693
  };
8428
8694
  };
8429
8695
  };
8430
8696
  };
8431
8697
  };
8698
+ CargoNet: {
8699
+ colors: any;
8700
+ };
8432
8701
  };
8433
8702
 
8434
8703
  type BaseToastProps = {
package/dist/index.js CHANGED
@@ -11793,8 +11793,8 @@ var spacing2, space2;
11793
11793
  var init_spacing = __esm({
11794
11794
  "src/theme/foundations/spacing.ts"() {
11795
11795
  spacing2 = Object.entries(tokens10__namespace.default.size.spacing).reduce(
11796
- (tokens14, [key, token]) => ({
11797
- ...tokens14,
11796
+ (tokens15, [key, token]) => ({
11797
+ ...tokens15,
11798
11798
  [Number(key)]: token
11799
11799
  }),
11800
11800
  {}
@@ -11997,7 +11997,7 @@ function getColorSchemeClickableProps(props) {
11997
11997
  switch (props.colorScheme) {
11998
11998
  case "white":
11999
11999
  return {
12000
- outlineColor: "silver"
12000
+ ...floatingBorder("default", props)
12001
12001
  };
12002
12002
  case "grey":
12003
12003
  return {
@@ -12015,6 +12015,7 @@ var init_card2 = __esm({
12015
12015
  "src/theme/components/card.ts"() {
12016
12016
  init_foundations();
12017
12017
  init_base_utils();
12018
+ init_floating_utils();
12018
12019
  init_focus_utils();
12019
12020
  config8 = react.defineStyleConfig({
12020
12021
  baseStyle: (props) => ({
@@ -12074,8 +12075,7 @@ var init_card2 = __esm({
12074
12075
  switch (props.colorScheme) {
12075
12076
  case "white":
12076
12077
  return {
12077
- outline: "1px solid",
12078
- outlineColor: "silver",
12078
+ ...baseBorder("default", props),
12079
12079
  backgroundColor: themeTools.mode(
12080
12080
  "white",
12081
12081
  `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
@@ -12111,7 +12111,7 @@ var init_card2 = __esm({
12111
12111
  "white",
12112
12112
  `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
12113
12113
  )(props),
12114
- outlineColor: "steel"
12114
+ ...floatingBorder("hover", props)
12115
12115
  };
12116
12116
  case "grey":
12117
12117
  return {
@@ -12131,7 +12131,7 @@ var init_card2 = __esm({
12131
12131
  case "white":
12132
12132
  return {
12133
12133
  backgroundColor: themeTools.mode("mint", "teal")(props),
12134
- outlineColor: "silver"
12134
+ ...floatingBorder("active", props)
12135
12135
  };
12136
12136
  case "grey":
12137
12137
  return {
@@ -15104,8 +15104,6 @@ var init_font_faces = __esm({
15104
15104
  `;
15105
15105
  }
15106
15106
  });
15107
-
15108
- // src/theme/index.ts
15109
15107
  exports.Brand = void 0; exports.theme = void 0; exports.brandTheme = void 0;
15110
15108
  var init_theme = __esm({
15111
15109
  "src/theme/index.ts"() {
@@ -15116,6 +15114,7 @@ var init_theme = __esm({
15116
15114
  exports.Brand = /* @__PURE__ */ ((Brand2) => {
15117
15115
  Brand2["VyDigital"] = "VyDigital";
15118
15116
  Brand2["VyUtvikling"] = "VyUtvikling";
15117
+ Brand2["CargoNet"] = "CargoNet";
15119
15118
  return Brand2;
15120
15119
  })(exports.Brand || {});
15121
15120
  exports.theme = {
@@ -15133,12 +15132,14 @@ var init_theme = __esm({
15133
15132
  accent: {
15134
15133
  surface: {
15135
15134
  default: {
15136
- light: colors2.seaMist,
15137
15135
  dark: colors2.darkGrey
15138
15136
  }
15139
15137
  }
15140
15138
  }
15141
15139
  }
15140
+ },
15141
+ ["CargoNet" /* CargoNet */]: {
15142
+ colors: tokens10__namespace.default.color.cargonet
15142
15143
  }
15143
15144
  };
15144
15145
  }
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-A5E3F3T5.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-AS7NY5TY.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.0.2",
3
+ "version": "9.1.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/theme/components/card.ts CHANGED
@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
2
2
  import { mode } from "@chakra-ui/theme-tools";
3
3
  import { colors } from "../foundations";
4
4
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
5
+ import { floatingBorder } from "../utils/floating-utils";
5
6
  import { focusVisibleStyles } from "../utils/focus-utils";
6
7
 
7
8
  const config = defineStyleConfig({
@@ -74,14 +75,14 @@ type CardThemeProps = {
74
75
  | "orange"
75
76
  | "red";
76
77
  theme: any;
78
+ colorMode: "light" | "dark";
77
79
  };
78
80
 
79
81
  const getColorSchemeBaseProps = (props: CardThemeProps) => {
80
82
  switch (props.colorScheme) {
81
83
  case "white":
82
84
  return {
83
- outline: "1px solid",
84
- outlineColor: "silver",
85
+ ...baseBorder("default", props),
85
86
  backgroundColor: mode(
86
87
  "white",
87
88
  `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`,
@@ -113,7 +114,7 @@ function getColorSchemeClickableProps(props: CardThemeProps) {
113
114
  switch (props.colorScheme) {
114
115
  case "white":
115
116
  return {
116
- outlineColor: "silver",
117
+ ...floatingBorder("default", props),
117
118
  };
118
119
  case "grey":
119
120
  return {
@@ -135,7 +136,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
135
136
  "white",
136
137
  `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`,
137
138
  )(props),
138
- outlineColor: "steel",
139
+ ...floatingBorder("hover", props),
139
140
  };
140
141
  case "grey":
141
142
  return {
@@ -154,7 +155,7 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
154
155
  case "white":
155
156
  return {
156
157
  backgroundColor: mode("mint", "teal")(props),
157
- outlineColor: "silver",
158
+ ...floatingBorder("active", props),
158
159
  };
159
160
  case "grey":
160
161
  return {
package/src/theme/index.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import { theme as defaultTheme } from "@chakra-ui/theme";
2
+ import tokens from "@vygruppen/spor-design-tokens";
2
3
  import * as components from "./components";
3
4
  import * as foundations from "./foundations";
4
5
 
5
6
  export enum Brand {
6
7
  VyDigital = "VyDigital",
7
8
  VyUtvikling = "VyUtvikling",
9
+ CargoNet = "CargoNet",
8
10
  }
9
11
 
10
12
  export const theme = {
@@ -23,13 +25,15 @@ export const brandTheme = {
23
25
  accent: {
24
26
  surface: {
25
27
  default: {
26
- light: foundations.colors.seaMist,
27
28
  dark: foundations.colors.darkGrey,
28
29
  },
29
30
  },
30
31
  },
31
32
  },
32
33
  },
34
+ [Brand.CargoNet]: {
35
+ colors: tokens.color.cargonet as any,
36
+ },
33
37
  };
34
38
 
35
39
  export { fontFaces } from "./font-faces";