@navikt/ds-css 3.1.3 → 3.2.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 (15) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/config/_mappings.js +5 -0
  3. package/copybutton.css +129 -0
  4. package/dist/component/copybutton.css +132 -0
  5. package/dist/component/copybutton.min.css +1 -0
  6. package/dist/component/index.css +110 -1
  7. package/dist/component/index.min.css +1 -1
  8. package/dist/components.css +109 -0
  9. package/dist/components.min.css +1 -1
  10. package/dist/global/tokens.css +1 -1
  11. package/dist/index.css +110 -1
  12. package/dist/index.min.css +1 -1
  13. package/index.css +1 -0
  14. package/package.json +2 -2
  15. package/tokens.json +14 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
8
+
9
+ - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
10
+ - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
11
+
3
12
  ## 3.1.3
4
13
 
5
14
  ### Patch Changes
package/config/_mappings.js CHANGED
@@ -63,6 +63,11 @@ const StyleMappings = {
63
63
  component: "ContentContainer",
64
64
  main: "content-container.css",
65
65
  },
66
+ {
67
+ component: "CopyButton",
68
+ main: "copybutton.css",
69
+ dependencies: [typoCss],
70
+ },
66
71
  { component: "Detail", main: typoCss },
67
72
  { component: "ErrorMessage", main: typoCss },
68
73
  { component: "ErrorSummary", main: formCss, dependencies: [typoCss] },
package/copybutton.css ADDED
@@ -0,0 +1,129 @@
1
+ [data-theme="dark"] .navds-copybutton,
2
+ [data-theme="dark"].navds-copybutton {
3
+ --a-text-action: var(--a-blue-300);
4
+ --a-surface-hover: rgb(214 231 255 /0.13);
5
+ --a-icon-success: rgb(51 170 95 /1);
6
+ --a-text-subtle: rgb(231 240 254 /0.69);
7
+ --a-text-default: rgb(251 252 254 /0.96);
8
+ }
9
+
10
+ .navds-copybutton {
11
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
12
+
13
+ cursor: pointer;
14
+ margin: 0;
15
+ text-decoration: none;
16
+ border: none;
17
+ background: none;
18
+ border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
19
+ padding: var(--__ac-copybutton-padding);
20
+ display: grid;
21
+ place-content: center;
22
+ }
23
+
24
+ .navds-copybutton--small {
25
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
26
+
27
+ min-height: 2rem;
28
+ }
29
+
30
+ .navds-copybutton--icon-only {
31
+ --__ac-copybutton-padding: var(--a-spacing-3);
32
+ }
33
+
34
+ .navds-copybutton--small.navds-copybutton--icon-only {
35
+ --__ac-copybutton-padding: var(--a-spacing-1);
36
+ }
37
+
38
+ .navds-copybutton__icon {
39
+ font-size: 1.5rem;
40
+ display: flex;
41
+ margin-left: -4px;
42
+ }
43
+
44
+ .navds-copybutton__icon:only-child {
45
+ margin: 0;
46
+ }
47
+
48
+ .navds-copybutton:focus-visible {
49
+ outline: none;
50
+ box-shadow: var(--a-shadow-focus);
51
+ }
52
+
53
+ @supports not selector(:focus-visible) {
54
+ .navds-copybutton:focus {
55
+ outline: none;
56
+ box-shadow: var(--a-shadow-focus);
57
+ }
58
+ }
59
+
60
+ /* Variant/action */
61
+ .navds-copybutton--action {
62
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
63
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
64
+ }
65
+
66
+ .navds-copybutton--action:hover {
67
+ color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
68
+ background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
69
+ }
70
+
71
+ .navds-copybutton--action:where(:disabled),
72
+ .navds-copybutton--action:hover:where(:disabled) {
73
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
74
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
75
+ box-shadow: none;
76
+ }
77
+
78
+ .navds-copybutton--active.navds-copybutton--action {
79
+ color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
80
+ }
81
+
82
+ /* Variant/neutral */
83
+ .navds-copybutton--neutral {
84
+ color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
85
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
86
+ }
87
+
88
+ .navds-copybutton--neutral:hover {
89
+ color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
90
+ background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
91
+ }
92
+
93
+ .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
94
+ .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
95
+ color: var(--ac-copybutton-neutral-text, var(--a-text-default));
96
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
97
+ box-shadow: none;
98
+ }
99
+
100
+ .navds-copybutton--active.navds-copybutton--neutral {
101
+ color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
102
+ }
103
+
104
+ .navds-copybutton__content {
105
+ display: inline-flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ gap: var(--a-spacing-2);
109
+ }
110
+
111
+ .navds-copybutton--active > .navds-copybutton__content {
112
+ animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
113
+ }
114
+
115
+ @keyframes akselCopyButtonAnimation {
116
+ 0% {
117
+ opacity: 0.4;
118
+ }
119
+
120
+ 100% {
121
+ opacity: 1;
122
+ }
123
+ }
124
+
125
+ /* Disabled */
126
+ .navds-copybutton:where(:disabled) {
127
+ cursor: not-allowed;
128
+ opacity: 0.3;
129
+ }
package/dist/component/copybutton.css ADDED
@@ -0,0 +1,132 @@
1
+ [data-theme="dark"] .navds-copybutton,
2
+ [data-theme="dark"].navds-copybutton {
3
+ --a-text-action: var(--a-blue-300);
4
+ --a-surface-hover: rgb(214 231 255 /0.13);
5
+ --a-icon-success: rgb(51 170 95 /1);
6
+ --a-text-subtle: rgb(231 240 254 /0.69);
7
+ --a-text-default: rgb(251 252 254 /0.96);
8
+ }
9
+
10
+ .navds-copybutton {
11
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
12
+
13
+ cursor: pointer;
14
+ margin: 0;
15
+ text-decoration: none;
16
+ border: none;
17
+ background: none;
18
+ border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
19
+ padding: var(--__ac-copybutton-padding);
20
+ display: grid;
21
+ place-content: center;
22
+ }
23
+
24
+ .navds-copybutton--small {
25
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
26
+
27
+ min-height: 2rem;
28
+ }
29
+
30
+ .navds-copybutton--icon-only {
31
+ --__ac-copybutton-padding: var(--a-spacing-3);
32
+ }
33
+
34
+ .navds-copybutton--small.navds-copybutton--icon-only {
35
+ --__ac-copybutton-padding: var(--a-spacing-1);
36
+ }
37
+
38
+ .navds-copybutton__icon {
39
+ font-size: 1.5rem;
40
+ display: flex;
41
+ margin-left: -4px;
42
+ }
43
+
44
+ .navds-copybutton__icon:only-child {
45
+ margin: 0;
46
+ }
47
+
48
+ .navds-copybutton:focus-visible {
49
+ outline: none;
50
+ box-shadow: var(--a-shadow-focus);
51
+ }
52
+
53
+ @supports not selector(:focus-visible) {
54
+ .navds-copybutton:focus {
55
+ outline: none;
56
+ box-shadow: var(--a-shadow-focus);
57
+ }
58
+ }
59
+
60
+ /* Variant/action */
61
+
62
+ .navds-copybutton--action {
63
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
64
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
65
+ }
66
+
67
+ .navds-copybutton--action:hover {
68
+ color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
69
+ background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
70
+ }
71
+
72
+ .navds-copybutton--action:where(:disabled),
73
+ .navds-copybutton--action:hover:where(:disabled) {
74
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
75
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
76
+ box-shadow: none;
77
+ }
78
+
79
+ .navds-copybutton--active.navds-copybutton--action {
80
+ color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
81
+ }
82
+
83
+ /* Variant/neutral */
84
+
85
+ .navds-copybutton--neutral {
86
+ color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
87
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
88
+ }
89
+
90
+ .navds-copybutton--neutral:hover {
91
+ color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
92
+ background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
93
+ }
94
+
95
+ .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
96
+ .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
97
+ color: var(--ac-copybutton-neutral-text, var(--a-text-default));
98
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
99
+ box-shadow: none;
100
+ }
101
+
102
+ .navds-copybutton--active.navds-copybutton--neutral {
103
+ color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
104
+ }
105
+
106
+ .navds-copybutton__content {
107
+ display: inline-flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ gap: var(--a-spacing-2);
111
+ }
112
+
113
+ .navds-copybutton--active > .navds-copybutton__content {
114
+ animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
115
+ }
116
+
117
+ @keyframes akselCopyButtonAnimation {
118
+ 0% {
119
+ opacity: 0.4;
120
+ }
121
+
122
+ 100% {
123
+ opacity: 1;
124
+ }
125
+ }
126
+
127
+ /* Disabled */
128
+
129
+ .navds-copybutton:where(:disabled) {
130
+ cursor: not-allowed;
131
+ opacity: 0.3;
132
+ }
package/dist/component/copybutton.min.css ADDED
@@ -0,0 +1 @@
1
+ [data-theme=dark] .navds-copybutton,[data-theme=dark].navds-copybutton{--a-text-action:var(--a-blue-300);--a-surface-hover:rgba(214,231,255,.13);--a-icon-success:#33aa5f;--a-text-subtle:rgba(231,240,254,.69);--a-text-default:rgba(251,252,254,.96)}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton__icon{display:flex;font-size:1.5rem;margin-left:-4px}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-action-hover-text,var(--a-text-action))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--a-icon-success))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--a-text-subtle))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-neutral-hover-text,var(--a-text-default))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--a-text-default))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--a-text-default))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--active>.navds-copybutton__content{-webkit-animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear);animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@-webkit-keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Thu, 11 May 2023 14:01:48 GMT
4
+ * Generated on Tue, 16 May 2023 11:17:28 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1882,6 +1882,115 @@ body,
1882
1882
  .navds-chips--small .navds-chips--icon-left {
1883
1883
  padding-left: 0.375rem;
1884
1884
  }
1885
+ [data-theme="dark"] .navds-copybutton,
1886
+ [data-theme="dark"].navds-copybutton {
1887
+ --a-text-action: var(--a-blue-300);
1888
+ --a-surface-hover: rgb(214 231 255 /0.13);
1889
+ --a-icon-success: rgb(51 170 95 /1);
1890
+ --a-text-subtle: rgb(231 240 254 /0.69);
1891
+ --a-text-default: rgb(251 252 254 /0.96);
1892
+ }
1893
+ .navds-copybutton {
1894
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
1895
+
1896
+ cursor: pointer;
1897
+ margin: 0;
1898
+ text-decoration: none;
1899
+ border: none;
1900
+ background: none;
1901
+ border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
1902
+ padding: var(--__ac-copybutton-padding);
1903
+ display: grid;
1904
+ place-content: center;
1905
+ }
1906
+ .navds-copybutton--small {
1907
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
1908
+
1909
+ min-height: 2rem;
1910
+ }
1911
+ .navds-copybutton--icon-only {
1912
+ --__ac-copybutton-padding: var(--a-spacing-3);
1913
+ }
1914
+ .navds-copybutton--small.navds-copybutton--icon-only {
1915
+ --__ac-copybutton-padding: var(--a-spacing-1);
1916
+ }
1917
+ .navds-copybutton__icon {
1918
+ font-size: 1.5rem;
1919
+ display: flex;
1920
+ margin-left: -4px;
1921
+ }
1922
+ .navds-copybutton__icon:only-child {
1923
+ margin: 0;
1924
+ }
1925
+ .navds-copybutton:focus-visible {
1926
+ outline: none;
1927
+ box-shadow: var(--a-shadow-focus);
1928
+ }
1929
+ @supports not selector(:focus-visible) {
1930
+ .navds-copybutton:focus {
1931
+ outline: none;
1932
+ box-shadow: var(--a-shadow-focus);
1933
+ }
1934
+ }
1935
+ /* Variant/action */
1936
+ .navds-copybutton--action {
1937
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1938
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1939
+ }
1940
+ .navds-copybutton--action:hover {
1941
+ color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
1942
+ background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
1943
+ }
1944
+ .navds-copybutton--action:where(:disabled),
1945
+ .navds-copybutton--action:hover:where(:disabled) {
1946
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1947
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1948
+ box-shadow: none;
1949
+ }
1950
+ .navds-copybutton--active.navds-copybutton--action {
1951
+ color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
1952
+ }
1953
+ /* Variant/neutral */
1954
+ .navds-copybutton--neutral {
1955
+ color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
1956
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1957
+ }
1958
+ .navds-copybutton--neutral:hover {
1959
+ color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
1960
+ background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
1961
+ }
1962
+ .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
1963
+ .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
1964
+ color: var(--ac-copybutton-neutral-text, var(--a-text-default));
1965
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1966
+ box-shadow: none;
1967
+ }
1968
+ .navds-copybutton--active.navds-copybutton--neutral {
1969
+ color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
1970
+ }
1971
+ .navds-copybutton__content {
1972
+ display: inline-flex;
1973
+ align-items: center;
1974
+ justify-content: center;
1975
+ gap: var(--a-spacing-2);
1976
+ }
1977
+ .navds-copybutton--active > .navds-copybutton__content {
1978
+ animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
1979
+ }
1980
+ @keyframes akselCopyButtonAnimation {
1981
+ 0% {
1982
+ opacity: 0.4;
1983
+ }
1984
+
1985
+ 100% {
1986
+ opacity: 1;
1987
+ }
1988
+ }
1989
+ /* Disabled */
1990
+ .navds-copybutton:where(:disabled) {
1991
+ cursor: not-allowed;
1992
+ opacity: 0.3;
1993
+ }
1885
1994
  .navds-expansioncard {
1886
1995
  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
1887
1996
  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));