@vygruppen/spor-react 12.9.0 → 12.10.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.
Files changed (39) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/.turbo/turbo-postinstall.log +1 -1
  3. package/CHANGELOG.md +21 -0
  4. package/dist/index.cjs +89 -131
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +19 -40
  7. package/dist/index.d.ts +19 -40
  8. package/dist/index.mjs +89 -131
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +5 -4
  11. package/src/dialog/Drawer.tsx +2 -2
  12. package/src/linjetag/LineIcon.tsx +4 -2
  13. package/src/linjetag/TravelTag.tsx +2 -1
  14. package/src/loader/DarkFullScreenLoader.tsx +2 -1
  15. package/src/loader/LightFullScreenLoader.tsx +1 -7
  16. package/src/loader/LightInlineLoader.tsx +1 -7
  17. package/src/provider/SporProvider.tsx +12 -1
  18. package/src/theme/recipes/badge.ts +1 -1
  19. package/src/theme/recipes/close-button.ts +2 -2
  20. package/src/theme/recipes/link.ts +3 -3
  21. package/src/theme/recipes/pressable-card.ts +0 -1
  22. package/src/theme/recipes/skeleton.ts +1 -1
  23. package/src/theme/slot-recipes/alert-service.ts +1 -1
  24. package/src/theme/slot-recipes/checkbox.ts +2 -3
  25. package/src/theme/slot-recipes/choice-chip.ts +8 -8
  26. package/src/theme/slot-recipes/datepicker.ts +1 -2
  27. package/src/theme/slot-recipes/dialog.ts +1 -0
  28. package/src/theme/slot-recipes/drawer.ts +1 -0
  29. package/src/theme/slot-recipes/field.ts +4 -3
  30. package/src/theme/slot-recipes/floating-action-button.ts +1 -1
  31. package/src/theme/slot-recipes/line-icon.ts +3 -36
  32. package/src/theme/slot-recipes/radio-card.ts +0 -1
  33. package/src/theme/slot-recipes/select.ts +0 -1
  34. package/src/theme/slot-recipes/switch.ts +2 -4
  35. package/src/theme/slot-recipes/table.ts +0 -1
  36. package/src/theme/slot-recipes/tabs.ts +3 -4
  37. package/src/theme/slot-recipes/toast.ts +0 -9
  38. package/src/theme/slot-recipes/travel-tag.ts +11 -9
  39. package/src/toast/toast.tsx +1 -1
package/dist/index.d.cts CHANGED
@@ -572,7 +572,6 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
572
572
  wrapper: {
573
573
  outline: "1px solid";
574
574
  outlineColor: "core.outline";
575
- backgroundColor: "core.surface";
576
575
  _hover: {
577
576
  outline: "2px solid";
578
577
  outlineColor: "core.outline.hover";
@@ -2110,38 +2109,14 @@ declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
2110
2109
  iconContainer: {
2111
2110
  backgroundColor: "linjetag.altTransport";
2112
2111
  };
2113
- icon: {
2114
- color: "darkGrey";
2115
- "[aria-disabled=true] &": {
2116
- color: "white";
2117
- };
2118
- };
2119
2112
  };
2120
2113
  walk: {
2121
2114
  title: {
2122
2115
  color: "text";
2123
2116
  };
2124
- icon: {
2125
- color: "linjetag.walkLight";
2126
- "[aria-disabled=true] &": {
2127
- color: "icon.disabled";
2128
- };
2129
- };
2130
- _disabled: {
2131
- icon: {
2132
- color: string;
2133
- };
2134
- title: {
2135
- color: string;
2136
- };
2137
- };
2138
2117
  };
2139
2118
  custom: {
2140
- iconContainer: {
2141
- _disabled: {
2142
- backgroundColor: "surface.disabled";
2143
- };
2144
- };
2119
+ iconContainer: {};
2145
2120
  };
2146
2121
  };
2147
2122
  size: {
@@ -2213,10 +2188,10 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
2213
2188
  critical: {
2214
2189
  container: {
2215
2190
  border: "1px solid";
2216
- borderColor: "error.text";
2191
+ borderColor: "outline.error";
2217
2192
  };
2218
2193
  deviationIcon: {
2219
- color: "brightRed";
2194
+ color: "outline.error";
2220
2195
  };
2221
2196
  };
2222
2197
  major: {
@@ -2226,11 +2201,7 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
2226
2201
  };
2227
2202
  };
2228
2203
  minor: {};
2229
- info: {
2230
- deviationIcon: {
2231
- color: "ocean";
2232
- };
2233
- };
2204
+ info: {};
2234
2205
  none: {};
2235
2206
  };
2236
2207
  variant: {
@@ -2751,7 +2722,7 @@ declare const skeletonRecipe: _chakra_ui_react.RecipeDefinition<{
2751
2722
  };
2752
2723
  none: {
2753
2724
  animation: "none";
2754
- background: "steel";
2725
+ background: "surface.color.grey";
2755
2726
  };
2756
2727
  };
2757
2728
  }>;
@@ -2995,8 +2966,18 @@ declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxPro
2995
2966
  } & React__default.RefAttributes<HTMLDivElement>>;
2996
2967
 
2997
2968
  type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
2969
+ /**
2970
+ * The current language of your application. Used for built-in microcopy and labels. Default is Norwegian (bokmål).
2971
+ */
2998
2972
  language?: Language;
2973
+ /**
2974
+ * The theme to use for colors and design tokens. If not provided, the default Spor theme is used.
2975
+ */
2999
2976
  theme?: SystemContext;
2977
+ /**
2978
+ * If true, enables system color mode. If false, the default theme is light.
2979
+ */
2980
+ enableSystemColorMode?: boolean;
3000
2981
  };
3001
2982
  /**
3002
2983
  * This component is used to provide the specified theme of colors and other
@@ -3035,7 +3016,7 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
3035
3016
  * );
3036
3017
  * ```
3037
3018
  */
3038
- declare const SporProvider: ({ language, theme, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
3019
+ declare const SporProvider: ({ language, theme, enableSystemColorMode, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
3039
3020
 
3040
3021
  declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "title" | "closeButton" | "container" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle" | "backButton", {
3041
3022
  variant: {
@@ -3164,7 +3145,6 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3164
3145
  variant: {
3165
3146
  core: {
3166
3147
  list: {
3167
- backgroundColor: "core.surface";
3168
3148
  color: "core.text";
3169
3149
  border: "sm";
3170
3150
  };
@@ -3174,7 +3154,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3174
3154
  borderColor: "transparent";
3175
3155
  _hover: {
3176
3156
  outline: "2px solid";
3177
- outlineColor: "core.surface.hover";
3157
+ outlineColor: "core.outline.hover";
3178
3158
  outlineOffset: "-2px";
3179
3159
  };
3180
3160
  _active: {
@@ -3191,7 +3171,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3191
3171
  };
3192
3172
  _disabled: {
3193
3173
  backgroundColor: "surface.disabled";
3194
- color: "brand.text.disabled";
3174
+ color: "surface.disabled";
3195
3175
  };
3196
3176
  };
3197
3177
  };
@@ -3204,7 +3184,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3204
3184
  color: "accent.text";
3205
3185
  _disabled: {
3206
3186
  backgroundColor: "surface.disabled";
3207
- color: "accent.text.disabled";
3187
+ color: "icon.disabled";
3208
3188
  };
3209
3189
  _hover: {
3210
3190
  backgroundColor: "accent.surface.hover";
@@ -3357,7 +3337,6 @@ declare const tableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "b
3357
3337
  backgroundColor: "bg";
3358
3338
  };
3359
3339
  columnHeader: {
3360
- color: "brand.text.inverted";
3361
3340
  backgroundColor: "surface.disabled";
3362
3341
  _hover: {
3363
3342
  backgroundColor: "surface.disabled";
package/dist/index.d.ts CHANGED
@@ -572,7 +572,6 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
572
572
  wrapper: {
573
573
  outline: "1px solid";
574
574
  outlineColor: "core.outline";
575
- backgroundColor: "core.surface";
576
575
  _hover: {
577
576
  outline: "2px solid";
578
577
  outlineColor: "core.outline.hover";
@@ -2110,38 +2109,14 @@ declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
2110
2109
  iconContainer: {
2111
2110
  backgroundColor: "linjetag.altTransport";
2112
2111
  };
2113
- icon: {
2114
- color: "darkGrey";
2115
- "[aria-disabled=true] &": {
2116
- color: "white";
2117
- };
2118
- };
2119
2112
  };
2120
2113
  walk: {
2121
2114
  title: {
2122
2115
  color: "text";
2123
2116
  };
2124
- icon: {
2125
- color: "linjetag.walkLight";
2126
- "[aria-disabled=true] &": {
2127
- color: "icon.disabled";
2128
- };
2129
- };
2130
- _disabled: {
2131
- icon: {
2132
- color: string;
2133
- };
2134
- title: {
2135
- color: string;
2136
- };
2137
- };
2138
2117
  };
2139
2118
  custom: {
2140
- iconContainer: {
2141
- _disabled: {
2142
- backgroundColor: "surface.disabled";
2143
- };
2144
- };
2119
+ iconContainer: {};
2145
2120
  };
2146
2121
  };
2147
2122
  size: {
@@ -2213,10 +2188,10 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
2213
2188
  critical: {
2214
2189
  container: {
2215
2190
  border: "1px solid";
2216
- borderColor: "error.text";
2191
+ borderColor: "outline.error";
2217
2192
  };
2218
2193
  deviationIcon: {
2219
- color: "brightRed";
2194
+ color: "outline.error";
2220
2195
  };
2221
2196
  };
2222
2197
  major: {
@@ -2226,11 +2201,7 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
2226
2201
  };
2227
2202
  };
2228
2203
  minor: {};
2229
- info: {
2230
- deviationIcon: {
2231
- color: "ocean";
2232
- };
2233
- };
2204
+ info: {};
2234
2205
  none: {};
2235
2206
  };
2236
2207
  variant: {
@@ -2751,7 +2722,7 @@ declare const skeletonRecipe: _chakra_ui_react.RecipeDefinition<{
2751
2722
  };
2752
2723
  none: {
2753
2724
  animation: "none";
2754
- background: "steel";
2725
+ background: "surface.color.grey";
2755
2726
  };
2756
2727
  };
2757
2728
  }>;
@@ -2995,8 +2966,18 @@ declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxPro
2995
2966
  } & React__default.RefAttributes<HTMLDivElement>>;
2996
2967
 
2997
2968
  type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
2969
+ /**
2970
+ * The current language of your application. Used for built-in microcopy and labels. Default is Norwegian (bokmål).
2971
+ */
2998
2972
  language?: Language;
2973
+ /**
2974
+ * The theme to use for colors and design tokens. If not provided, the default Spor theme is used.
2975
+ */
2999
2976
  theme?: SystemContext;
2977
+ /**
2978
+ * If true, enables system color mode. If false, the default theme is light.
2979
+ */
2980
+ enableSystemColorMode?: boolean;
3000
2981
  };
3001
2982
  /**
3002
2983
  * This component is used to provide the specified theme of colors and other
@@ -3035,7 +3016,7 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
3035
3016
  * );
3036
3017
  * ```
3037
3018
  */
3038
- declare const SporProvider: ({ language, theme, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
3019
+ declare const SporProvider: ({ language, theme, enableSystemColorMode, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
3039
3020
 
3040
3021
  declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "title" | "closeButton" | "container" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle" | "backButton", {
3041
3022
  variant: {
@@ -3164,7 +3145,6 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3164
3145
  variant: {
3165
3146
  core: {
3166
3147
  list: {
3167
- backgroundColor: "core.surface";
3168
3148
  color: "core.text";
3169
3149
  border: "sm";
3170
3150
  };
@@ -3174,7 +3154,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3174
3154
  borderColor: "transparent";
3175
3155
  _hover: {
3176
3156
  outline: "2px solid";
3177
- outlineColor: "core.surface.hover";
3157
+ outlineColor: "core.outline.hover";
3178
3158
  outlineOffset: "-2px";
3179
3159
  };
3180
3160
  _active: {
@@ -3191,7 +3171,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3191
3171
  };
3192
3172
  _disabled: {
3193
3173
  backgroundColor: "surface.disabled";
3194
- color: "brand.text.disabled";
3174
+ color: "surface.disabled";
3195
3175
  };
3196
3176
  };
3197
3177
  };
@@ -3204,7 +3184,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
3204
3184
  color: "accent.text";
3205
3185
  _disabled: {
3206
3186
  backgroundColor: "surface.disabled";
3207
- color: "accent.text.disabled";
3187
+ color: "icon.disabled";
3208
3188
  };
3209
3189
  _hover: {
3210
3190
  backgroundColor: "accent.surface.hover";
@@ -3357,7 +3337,6 @@ declare const tableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "b
3357
3337
  backgroundColor: "bg";
3358
3338
  };
3359
3339
  columnHeader: {
3360
- color: "brand.text.inverted";
3361
3340
  backgroundColor: "surface.disabled";
3362
3341
  _hover: {
3363
3342
  backgroundColor: "surface.disabled";