Add white alpha color

navikt · Oct 4, 2023 · d56039b · d56039b
1 parent 57238d8
commit d56039b
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/src/packages/arbeidsplassen-css/not-found.css b/src/packages/arbeidsplassen-css/not-found.css
@@ -19,7 +19,7 @@
 [data-theme="arbeidsplassen-dark"] {
   --arb-svg-arms-and-legs: var(--arb-dark-mode-shade-400);
   --arb-svg-arms-and-legs-fill: var(--arb-dark-mode-shade-400);
-  --arb-svg-shadow: var(--arb-dark-mode-shade-100);
+  --arb-svg-shadow: var(--arb-whitealpha-50);
 }
 
 [data-theme="arbeidsplassen"] {

diff --git a/src/packages/arbeidsplassen-css/package.json b/src/packages/arbeidsplassen-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/arbeidsplassen-css",
-  "version": "7.2.10",
+  "version": "7.2.11",
   "main": "index.css",
   "private": false,
   "scripts": {

diff --git a/src/packages/arbeidsplassen-react/package.json b/src/packages/arbeidsplassen-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/arbeidsplassen-react",
-  "version": "7.2.10",
+  "version": "7.2.11",
   "main": "dist/index.js",
   "private": false,
   "scripts": {

diff --git a/src/packages/arbeidsplassen-theme/colors.css b/src/packages/arbeidsplassen-theme/colors.css
@@ -10,6 +10,7 @@
   --arb-grayalpha-700: rgba(0, 0, 0, 0.65);
   --arb-grayalpha-800: rgba(0, 0, 0, 0.75);
   --arb-grayalpha-900: rgba(0, 0, 0, 0.85);
+  --arb-whitealpha-50: rgba(255, 255, 255, 0.06);
   --arb-white: #ffffff;
   --arb-blue-50: #e3e6f7;
   --arb-blue-100: #c6cdf5;

diff --git a/src/packages/arbeidsplassen-theme/dark.css b/src/packages/arbeidsplassen-theme/dark.css
@@ -26,8 +26,8 @@
   --a-surface-action: var(--arb-blue-200);
   --a-surface-action-hover: var(--arb-blue-300);
   --a-surface-action-active: var(--arb-green-500);
-  --a-surface-action-subtle: var(--arb-dark-mode-shade-100);
-  --a-surface-action-subtle-hover: var(--arb-dark-mode-shade-100);
+  --a-surface-action-subtle: var(--arb-whitealpha-50);
+  --a-surface-action-subtle-hover: var(--arb-whitealpha-50);
   --a-surface-action-selected: var(--arb-green-500);
   --a-surface-action-selected-hover: var(--arb-green-400);
 

diff --git a/src/pages/Modal.js b/src/pages/Modal.js
@@ -23,10 +23,18 @@ const ModalExample = () => {
             exercitation non minim minim pariatur sunt laborum ipsum.
             Exercitation nostrud est laborum magna non non aliqua qui esse.
           </BodyLong>
+        </Modal.Body>
+        <Modal.Footer>
           <Button variant="primary" onClick={() => setOpen((x) => !x)}>
-            Lukk modal
+            Knapp 1
           </Button>
-        </Modal.Body>
+          <Button variant="secondary" onClick={() => setOpen((x) => !x)}>
+            Knapp 2
+          </Button>
+          <Button variant="tertiary" onClick={() => setOpen((x) => !x)}>
+            Knapp 3
+          </Button>
+        </Modal.Footer>
       </Modal>
     </Layout>
   );