@bi-digital/css 0.11.0 → 0.11.2

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 (4) hide show
  1. package/dist/components/tabs.css +18 -15
  2. package/dist/components.css +18 -15
  3. package/dist/salesforce.css +18 -15
  4. package/package.json +2 -2
package/dist/components/tabs.css CHANGED
@@ -10,6 +10,7 @@
10
10
  }
11
11
 
12
12
  .bi-tabs[data-dark="true"] {
13
+ --bic-tabs-tab-color: var(--bi-neutral-5);
13
14
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
14
15
  --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
15
16
  --bic-tabs-tab-background-press: var(--bi-states-press-light);
@@ -23,7 +24,7 @@
23
24
  overflow: hidden;
24
25
  }
25
26
 
26
- .bi-tabs :is([role="tablist"], ds-tablist) {
27
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
27
28
  scrollbar-width: none;
28
29
  flex-direction: row;
29
30
  flex-shrink: 0;
@@ -31,11 +32,11 @@
31
32
  overflow-x: auto;
32
33
  }
33
34
 
34
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
35
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
35
36
  display: flex;
36
37
  }
37
38
 
38
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
39
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
39
40
  font: var(--bic-tabs-tab-font);
40
41
  border-radius: var(--bi-radius-medium);
41
42
  box-sizing: border-box;
@@ -52,45 +53,46 @@
52
53
  justify-content: center;
53
54
  margin: 0;
54
55
  line-height: 1.5;
56
+ text-decoration: none;
55
57
  transition: color .2s ease-in-out;
56
58
  position: relative;
57
59
  }
58
60
 
59
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
61
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
60
62
  display: flex;
61
63
  }
62
64
 
63
65
  @media (hover: hover) and (pointer: fine) {
64
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
66
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
65
67
  background: var(--bic-tabs-tab-background-hover);
66
68
  }
67
69
  }
68
70
 
69
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
71
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
70
72
  background: var(--bic-tabs-tab-background-press);
71
73
  }
72
74
 
73
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
75
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
74
76
  border-bottom-right-radius: 0;
75
77
  border-bottom-left-radius: 0;
76
78
  }
77
79
 
78
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
80
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
79
81
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
80
82
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
81
83
  outline-offset: var(--_bi--focus, -3px);
82
84
  }
83
85
 
84
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
86
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
85
87
  bottom: 3px;
86
88
  }
87
89
 
88
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
90
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
89
91
  font-size: var(--bi-icon-medium);
90
92
  flex-shrink: 0;
91
93
  }
92
94
 
93
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
95
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
94
96
  background: var(--bic-tabs-tab-color-selected);
95
97
  content: "";
96
98
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -105,25 +107,26 @@
105
107
  }
106
108
 
107
109
  @media (prefers-reduced-motion: reduce) {
108
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
110
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
109
111
  transition: none;
110
112
  }
111
113
 
112
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
114
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
113
115
  transition: none;
114
116
  }
115
117
  }
116
118
 
117
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
119
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
118
120
  color: var(--bic-tabs-tab-color-selected);
119
121
  }
120
122
 
121
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
123
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
122
124
  width: calc(100% - var(--bi-scale-6x));
123
125
  }
124
126
 
125
127
  .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
126
128
  padding: var(--bic-tabs-panel-padding);
129
+ color: var(--bic-tabs-tab-color);
127
130
  outline: none;
128
131
  flex-grow: 1;
129
132
  }
package/dist/components.css CHANGED
@@ -2780,6 +2780,7 @@ svg[data-color="white"] {
2780
2780
  }
2781
2781
 
2782
2782
  .bi-tabs[data-dark="true"] {
2783
+ --bic-tabs-tab-color: var(--bi-neutral-5);
2783
2784
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
2784
2785
  --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
2785
2786
  --bic-tabs-tab-background-press: var(--bi-states-press-light);
@@ -2793,7 +2794,7 @@ svg[data-color="white"] {
2793
2794
  overflow: hidden;
2794
2795
  }
2795
2796
 
2796
- .bi-tabs :is([role="tablist"], ds-tablist) {
2797
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
2797
2798
  scrollbar-width: none;
2798
2799
  flex-direction: row;
2799
2800
  flex-shrink: 0;
@@ -2801,11 +2802,11 @@ svg[data-color="white"] {
2801
2802
  overflow-x: auto;
2802
2803
  }
2803
2804
 
2804
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
2805
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
2805
2806
  display: flex;
2806
2807
  }
2807
2808
 
2808
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2809
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2809
2810
  font: var(--bic-tabs-tab-font);
2810
2811
  border-radius: var(--bi-radius-medium);
2811
2812
  box-sizing: border-box;
@@ -2822,45 +2823,46 @@ svg[data-color="white"] {
2822
2823
  justify-content: center;
2823
2824
  margin: 0;
2824
2825
  line-height: 1.5;
2826
+ text-decoration: none;
2825
2827
  transition: color .2s ease-in-out;
2826
2828
  position: relative;
2827
2829
  }
2828
2830
 
2829
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
2831
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
2830
2832
  display: flex;
2831
2833
  }
2832
2834
 
2833
2835
  @media (hover: hover) and (pointer: fine) {
2834
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
2836
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
2835
2837
  background: var(--bic-tabs-tab-background-hover);
2836
2838
  }
2837
2839
  }
2838
2840
 
2839
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
2841
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
2840
2842
  background: var(--bic-tabs-tab-background-press);
2841
2843
  }
2842
2844
 
2843
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
2845
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
2844
2846
  border-bottom-right-radius: 0;
2845
2847
  border-bottom-left-radius: 0;
2846
2848
  }
2847
2849
 
2848
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
2850
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
2849
2851
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
2850
2852
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
2851
2853
  outline-offset: var(--_bi--focus, -3px);
2852
2854
  }
2853
2855
 
2854
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
2856
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
2855
2857
  bottom: 3px;
2856
2858
  }
2857
2859
 
2858
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
2860
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
2859
2861
  font-size: var(--bi-icon-medium);
2860
2862
  flex-shrink: 0;
2861
2863
  }
2862
2864
 
2863
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2865
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2864
2866
  background: var(--bic-tabs-tab-color-selected);
2865
2867
  content: "";
2866
2868
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2875,25 +2877,26 @@ svg[data-color="white"] {
2875
2877
  }
2876
2878
 
2877
2879
  @media (prefers-reduced-motion: reduce) {
2878
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2880
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2879
2881
  transition: none;
2880
2882
  }
2881
2883
 
2882
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2884
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2883
2885
  transition: none;
2884
2886
  }
2885
2887
  }
2886
2888
 
2887
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
2889
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
2888
2890
  color: var(--bic-tabs-tab-color-selected);
2889
2891
  }
2890
2892
 
2891
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
2893
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
2892
2894
  width: calc(100% - var(--bi-scale-6x));
2893
2895
  }
2894
2896
 
2895
2897
  .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
2896
2898
  padding: var(--bic-tabs-panel-padding);
2899
+ color: var(--bic-tabs-tab-color);
2897
2900
  outline: none;
2898
2901
  flex-grow: 1;
2899
2902
  }
package/dist/salesforce.css CHANGED
@@ -3006,6 +3006,7 @@ svg[data-color="white"] {
3006
3006
  }
3007
3007
 
3008
3008
  .bi-tabs[data-dark="true"] {
3009
+ --bic-tabs-tab-color: var(--bi-neutral-5);
3009
3010
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3010
3011
  --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
3011
3012
  --bic-tabs-tab-background-press: var(--bi-states-press-light);
@@ -3019,7 +3020,7 @@ svg[data-color="white"] {
3019
3020
  overflow: hidden;
3020
3021
  }
3021
3022
 
3022
- .bi-tabs :is([role="tablist"], ds-tablist) {
3023
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
3023
3024
  scrollbar-width: none;
3024
3025
  flex-direction: row;
3025
3026
  flex-shrink: 0;
@@ -3027,11 +3028,11 @@ svg[data-color="white"] {
3027
3028
  overflow-x: auto;
3028
3029
  }
3029
3030
 
3030
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
3031
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
3031
3032
  display: flex;
3032
3033
  }
3033
3034
 
3034
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3035
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
3035
3036
  font: var(--bic-tabs-tab-font);
3036
3037
  border-radius: var(--bi-radius-medium);
3037
3038
  box-sizing: border-box;
@@ -3048,45 +3049,46 @@ svg[data-color="white"] {
3048
3049
  justify-content: center;
3049
3050
  margin: 0;
3050
3051
  line-height: 1.5;
3052
+ text-decoration: none;
3051
3053
  transition: color .2s ease-in-out;
3052
3054
  position: relative;
3053
3055
  }
3054
3056
 
3055
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
3057
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
3056
3058
  display: flex;
3057
3059
  }
3058
3060
 
3059
3061
  @media (hover: hover) and (pointer: fine) {
3060
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
3062
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
3061
3063
  background: var(--bic-tabs-tab-background-hover);
3062
3064
  }
3063
3065
  }
3064
3066
 
3065
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
3067
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
3066
3068
  background: var(--bic-tabs-tab-background-press);
3067
3069
  }
3068
3070
 
3069
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
3071
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
3070
3072
  border-bottom-right-radius: 0;
3071
3073
  border-bottom-left-radius: 0;
3072
3074
  }
3073
3075
 
3074
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
3076
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
3075
3077
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3076
3078
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3077
3079
  outline-offset: var(--_bi--focus, -3px);
3078
3080
  }
3079
3081
 
3080
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
3082
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
3081
3083
  bottom: 3px;
3082
3084
  }
3083
3085
 
3084
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
3086
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
3085
3087
  font-size: var(--bi-icon-medium);
3086
3088
  flex-shrink: 0;
3087
3089
  }
3088
3090
 
3089
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3091
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
3090
3092
  background: var(--bic-tabs-tab-color-selected);
3091
3093
  content: "";
3092
3094
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -3101,25 +3103,26 @@ svg[data-color="white"] {
3101
3103
  }
3102
3104
 
3103
3105
  @media (prefers-reduced-motion: reduce) {
3104
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3106
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
3105
3107
  transition: none;
3106
3108
  }
3107
3109
 
3108
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3110
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
3109
3111
  transition: none;
3110
3112
  }
3111
3113
  }
3112
3114
 
3113
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
3115
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
3114
3116
  color: var(--bic-tabs-tab-color-selected);
3115
3117
  }
3116
3118
 
3117
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
3119
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
3118
3120
  width: calc(100% - var(--bi-scale-6x));
3119
3121
  }
3120
3122
 
3121
3123
  .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
3122
3124
  padding: var(--bic-tabs-panel-padding);
3125
+ color: var(--bic-tabs-tab-color);
3123
3126
  outline: none;
3124
3127
  flex-grow: 1;
3125
3128
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.0",
4
+ "version": "0.11.2",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.11.0"
33
+ "@bi-digital/tokens": "0.11.2"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",