Skip to content

GitLab

R
Rocket.Chat.Fuselage
Commit ea327bfd authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files
Options

Fix styling bugs

parent 0ec2f05f
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 55 deletions
packages/fuselage/.storybook/jest-results.json
View file @ ea327bfd
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":21,"numPassedTests":21,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":21,"numTotalTests":21,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1567881028991,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031461,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1567881030252,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031480,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1567881030254,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031542,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1567881030332,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031641,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1567881030222,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031652,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1567881030299,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031657,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Drawer/spec.js","startTime":1567881030358,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031657,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1567881030288,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031856,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/FieldGroup/spec.js","startTime":1567881031496,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031868,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tabs/spec.js","startTime":1567881031677,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031870,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1567881031502,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031928,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/Header/spec.js","startTime":1567881031662,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031933,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1567881031561,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031981,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Input/spec.js","startTime":1567881031669,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881031998,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1567881031680,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032047,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Grid/spec.js","startTime":1567881031877,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032137,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/spec.js","startTime":1567881031888,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032150,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Field/spec.js","startTime":1567881031949,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032195,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tab/spec.js","startTime":1567881031992,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032199,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/spec.js","startTime":1567881031865,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032219,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/spec.js","startTime":1567881032008,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1567881032251,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1567881031942,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":22,"numPassedTests":22,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":22,"numTotalTests":22,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1568002303583,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002345543,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002345638,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002345550,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Drawer/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002345665,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002355414,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1568002306506,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002359079,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002359097,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1568002306507,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381061,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1568002359211,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381062,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/Header/spec.js","startTime":1568002349867,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381081,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/spec.js","startTime":1568002355475,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381495,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1568002349866,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381543,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1568002350069,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381657,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Input/spec.js","startTime":1568002359127,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002381821,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Field/spec.js","startTime":1568002381166,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002382080,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1568002381524,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002382545,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Grid/spec.js","startTime":1568002381230,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002382546,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Text/spec.js","startTime":1568002381317,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002382548,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/FieldGroup/spec.js","startTime":1568002350394,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002382741,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/spec.js","startTime":1568002382151,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002383030,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tabs/spec.js","startTime":1568002381670,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002383273,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tab/spec.js","startTime":1568002381945,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1568002383315,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/spec.js","startTime":1568002381692,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
packages/fuselage/src/components/Box/styles.scss
View file @ ea327bfd
@import '../../styles/theme.scss';
.rcx-box {
$transitions-duration: var-theme(box, transition-duration, get-token(transitions, short-duration));
box-sizing: border-box;
transition: all var-theme(transitions-short-duration);
transition: all $transitions-duration;
letter-spacing: inherit;
font-family: inherit;
......@@ -29,3 +31,5 @@
opacity: 0;
}
}
@include export-theme;
packages/fuselage/src/components/Text/index.js
View file @ ea327bfd
......@@ -7,10 +7,12 @@ import styles from './styles.scss';
export const Text = React.forwardRef(function Text({
className,
colorVariant,
variant,
...props
}, ref) {
const classNames = useStyles(styles, ['text'], {
colorVariant,
variant,
}, className);
......@@ -20,3 +22,28 @@ export const Text = React.forwardRef(function Text({
{...props}
/>;
});
Text.colorVariants = [
'default',
'info',
'hint',
'disabled',
'alternative',
'primary',
'success',
'danger',
'warning',
];
Text.variants = [
'h1',
's1',
's2',
'p1',
'p2',
'c1',
'c2',
'micro',
];
Text.displayName = 'Text';
packages/fuselage/src/components/Text/stories.js
View file @ ea327bfd
......@@ -9,28 +9,28 @@ import { Text } from './index';
const props = createPropsFromKnobs({
children: 'Lorem ipsum dolor sit amet',
variant: ['p1', [
'h1',
's1',
's2',
'p1',
'p2',
'c1',
'c2',
'micro',
]],
colorVariant: ['default', Text.colorVariants],
variant: ['p1', Text.variants],
});
storiesOf('Elements|Text', module)
.addDecorator(withKnobs)
.addDecorator(centered)
.addParameters({ jest: ['Text/spec'] })
.add('default', () => <Text {...props()} />)
.add('h1 variant', () => <Text {...props({ variant: 'h1' })} />)
.add('s1 variant', () => <Text {...props({ variant: 's1' })} />)
.add('s2 variant', () => <Text {...props({ variant: 's2' })} />)
.add('p1 variant', () => <Text {...props({ variant: 'p1' })} />)
.add('p2 variant', () => <Text {...props({ variant: 'p2' })} />)
.add('c1 variant', () => <Text {...props({ variant: 'c1' })} />)
.add('c2 variant', () => <Text {...props({ variant: 'c2' })} />)
.add('micro variant', () => <Text {...props({ variant: 'micro' })} />);
.add('default', () => <Text {...props()} />);
Text.colorVariants.forEach((colorVariant) => {
storiesOf('Elements|Text', module)
.addDecorator(withKnobs)
.addDecorator(centered)
.addParameters({ jest: ['Text/spec'] })
.add(`${ colorVariant } color variant`, () => <Text {...props({ colorVariant })} />);
});
Text.variants.forEach((variant) => {
storiesOf('Elements|Text', module)
.addDecorator(withKnobs)
.addDecorator(centered)
.addParameters({ jest: ['Text/spec'] })
.add(`${ variant } variant`, () => <Text {...props({ variant })} />);
});
packages/fuselage/src/components/Text/styles.scss
View file @ ea327bfd
@import '../../helpers/mixins.scss';
@import '../../styles/theme.scss';
@mixin variant($name) {
letter-spacing: var-theme(typography-#{$name}-letter-spacing);
.rcx-text {
$variants: get-token(typography);
$color-variants: (
default: get-token(colors, dark800),
info: get-token(colors, dark700),
hint: get-token(colors, dark600),
disabled: get-token(colors, dark400),
alternative: get-token(colors, 'white'),
primary: get-token(colors, blue500),
success: get-token(colors, green500),
danger: get-token(colors, red500),
warning: get-token(colors, yellow700),
);
font-family: var-theme(typography-#{$name}-font-family);
font-size: var-theme(typography-#{$name}-font-size);
font-weight: var-theme(typography-#{$name}-font-weight);
line-height: var-theme(typography-#{$name}-line-height);
}
@mixin variant($name) {
$variant: map-get($variants, $name);
$prefix: variant-#{$name};
letter-spacing: var-theme(text, #{$prefix}-letter-spacing, to-rem(map-get($variant, letter-spacing)));
font-family: var-theme(text, #{$prefix}-font-family, map-get($variant, font-family));
font-size: var-theme(text, #{$prefix}-font-size, to-rem(map-get($variant, font-size)));
font-weight: var-theme(text, #{$prefix}-font-weight, map-get($variant, font-weight));
line-height: var-theme(text, #{$prefix}-line-height, to-rem(map-get($variant, line-height)));
}
@mixin color-variant($name) {
$variant: map-get($color-variants, $name);
$prefix: color-variant-#{$name};
color: var-theme(text, #{$prefix}-color, $variant);
}
.rcx-text {
@include variant(p1);
@include color-variant(default);
@each $name in map-keys(get-token('typography')) {
@each $name in map-keys($variants) {
&--variant-#{$name} {
@include variant($name);
}
}
@each $name in map-keys($color-variants) {
&--color-variant-#{$name} {
@include color-variant($name);
}
}
}
@include export-theme;
packages/fuselage/src/styles/theme.js
View file @ ea327bfd
......@@ -9,6 +9,14 @@ const toREM = (length) => {
return length;
};
const theme = {};
export const varTheme = (component, name, value) => {
theme[`${ component }-${ name }`] = value;
return `var(--rcx-theme-${ component }-${ name }, ${ value })`;
};
const mapBorder = ({
width,
radius,
......@@ -32,11 +40,6 @@ const mapTypographicVariant = ({
});
export default {
'borders-default-width': toREM(borders.default.width),
'borders-default-radius': toREM(borders.default.radius),
'transitions-short-duration': toREM(transitions.shortDuration),
borders: Object.entries(borders).reduce((obj, [name, border]) => ({
...obj,
[name]: mapBorder(border),
......
packages/fuselage/src/styles/theme.scss
View file @ ea327bfd
@import '../tokens/index.scss';
@function toREM($length) {
@function to-rem($length) {
@return #{$length / 16}rem;
}
@function var-theme($name) {
@if not map-has-key($theme, $name) {
@error 'The default theme has no var "#{$name}".';
}
@return var(--rcx-theme-#{$name}, map-get($theme, $name));
}
$theme: (
borders-default-width: torem(get-token('borders', 'default', 'width')),
borders-default-radius: torem(get-token('borders', 'default', 'radius')),
transitions-short-duration: get-token('transitions', 'short-duration'),
);
$theme: ();
@each $name, $properties in get-token('typography') {
@function var-theme($component, $name, $value) {
$theme: map-merge(
$theme,
(
typography-#{$name}-font-family: map-get($properties, font-family),
typography-#{$name}-font-size: torem(map-get($properties, font-size)),
typography-#{$name}-font-weight: map-get($properties, font-weight),
typography-#{$name}-letter-spacing: torem(map-get($properties, letter-spacing)),
typography-#{$name}-line-height: torem(map-get($properties, line-height)),
#{$component}-#{$name}: #{$value},
)
);
@return var(--rcx-theme-#{$component}-#{$name}, $value);
}
@mixin export-theme {
/* stylelint-disable */
:export {
@each $name, $value in $theme {
rcx-theme-#{$name}: #{$value};
}
}
/* stylelint-enable */
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment