Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 00:10:11 -05:00
Code Issues Activity

✨ Add spacing tokens to the design system

Browse source
This commit is contained in:
Belén Albeza 2024-07-11 18:07:51 +02:00
parent 5ab7123566
commit 1398bcbc8c
4 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/main/ui/ds/_utils.scss Normal file
View 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
@use "sass:math";
@function px2rem($value) {
$remValue: math.div($value, 16) * 1rem;
@return $remValue;
}

27
frontend/src/app/main/ui/ds/spacing.scss Normal file
View file

@ -0,0 +1,27 @@
// 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
@use "./utils.scss" as *;
$_sp-2: px2rem(2);
$_sp-4: px2rem(4);
$_sp-8: px2rem(8);
$_sp-12: px2rem(12);
$_sp-16: px2rem(16);
$_sp-20: px2rem(20);
$_sp-24: px2rem(24);
$_sp-32: px2rem(32);
:global(:root) {
--sp-xxs: #{$_sp-2};
--sp-xs: #{$_sp-4};
--sp-s: #{$_sp-8};
--sp-m: #{$_sp-12};
--sp-l: #{$_sp-16};
--sp-xl: #{$_sp-20};
--sp-xxl: #{$_sp-24};
--sp-xxxl: #{$_sp-32};
}

2
frontend/src/app/main/ui/ds/storybook.scss
View file

@ -1,5 +1,3 @@
@use "./colors.scss";
.story-wrapper {
display: grid;
row-gap: 1rem;

7
frontend/src/app/main/ui/ds/typography.scss
View file

@ -4,7 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@use "sass:math";
@use "./utils.scss" as *;
$_font-weight-regular: 400;
$_font-weight-medium: 500;
@ -13,11 +13,6 @@ $_font-lineheight-dense: 1.2;
$_font-lineheight-compact: 1.3;
$_font-lineheight-normal: 1.4;
@function px2rem($value) {
$remValue: math.div($value, 16) * 1rem;
@return $remValue;
}
$_fs-12: px2rem(12);
$_fs-14: px2rem(14);
$_fs-16: px2rem(16);