mirror of
https://github.com/penpot/penpot.git
synced 2025-06-07 08:41:40 +02:00
✨ Add elevation tokens to ds
This commit is contained in:
parent
fd58813ec9
commit
e5daa00d73
2 changed files with 18 additions and 0 deletions
|
@ -4,6 +4,8 @@
|
||||||
//
|
//
|
||||||
// Copyright (c) KALEIDOS INC
|
// Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
$mint-150: #7efff5;
|
$mint-150: #7efff5;
|
||||||
$mint-250: #00d1b8;
|
$mint-250: #00d1b8;
|
||||||
$mint-700: #426158;
|
$mint-700: #426158;
|
||||||
|
@ -69,6 +71,8 @@ $grayish-blue-500: #8f9da3;
|
||||||
|
|
||||||
--color-foreground-primary: #{$black};
|
--color-foreground-primary: #{$black};
|
||||||
--color-foreground-secondary: #{$blue-teal-700};
|
--color-foreground-secondary: #{$blue-teal-700};
|
||||||
|
|
||||||
|
--color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)};
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.default) {
|
:global(.default) {
|
||||||
|
@ -94,4 +98,6 @@ $grayish-blue-500: #8f9da3;
|
||||||
|
|
||||||
--color-foreground-primary: #{$white};
|
--color-foreground-primary: #{$white};
|
||||||
--color-foreground-secondary: #{$grayish-blue-500};
|
--color-foreground-secondary: #{$grayish-blue-500};
|
||||||
|
|
||||||
|
--color-shadow: #{color.change($black, $alpha: 0.6)};
|
||||||
}
|
}
|
||||||
|
|
12
frontend/src/app/main/ui/ds/elevations.scss
Normal file
12
frontend/src/app/main/ui/ds/elevations.scss
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
//
|
||||||
|
// Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
|
$elevation-shadow: 0 0 10px 0 var(--color-shadow);
|
||||||
|
|
||||||
|
:global(.light),
|
||||||
|
:global(.default) {
|
||||||
|
--elevation-shadow: #{$elevation-shadow};
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue