Skip to content

N
nexpie-grafana-theme
Commit c54f2912 by ijin08
Options

renamed default variables: s -> sm, m -> md, l -> lg

parent 51c06a8c
Showing with 42 additions and 42 deletions
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
...@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default; ...@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-xs: ${theme.spacing.xs} !default; $space-xs: ${theme.spacing.xs} !default;
$space-sm: ${theme.spacing.s} !default; $space-sm: ${theme.spacing.sm} !default;
$space-md: ${theme.spacing.m} !default; $space-md: ${theme.spacing.md} !default;
$space-lg: ${theme.spacing.l} !default; $space-lg: ${theme.spacing.lg} !default;
$space-xl: ${theme.spacing.xl} !default; $space-xl: ${theme.spacing.xl} !default;
$spacer: ${theme.spacing.d} !default; $spacer: ${theme.spacing.d} !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
...@@ -51,7 +51,7 @@ $spacers: ( ...@@ -51,7 +51,7 @@ $spacers: (
), ),
), ),
) !default; ) !default;
$border-width: ${theme.border.width.s} !default; $border-width: ${theme.border.width.sm} !default;
// Grid breakpoints // Grid breakpoints
// //
...@@ -60,9 +60,9 @@ $border-width: ${theme.border.width.s} !default; ...@@ -60,9 +60,9 @@ $border-width: ${theme.border.width.s} !default;
$grid-breakpoints: ( $grid-breakpoints: (
xs: ${theme.breakpoints.xs}, xs: ${theme.breakpoints.xs},
sm: ${theme.breakpoints.s}, sm: ${theme.breakpoints.sm},
md: ${theme.breakpoints.m}, md: ${theme.breakpoints.md},
lg: ${theme.breakpoints.l}, lg: ${theme.breakpoints.lg},
xl: ${theme.breakpoints.xl}, xl: ${theme.breakpoints.xl},
) !default; ) !default;
...@@ -96,12 +96,12 @@ $font-family-base: $font-family-sans-serif !default; ...@@ -96,12 +96,12 @@ $font-family-base: $font-family-sans-serif !default;
$font-size-root: ${theme.typography.size.root} !default; $font-size-root: ${theme.typography.size.root} !default;
$font-size-base: ${theme.typography.size.base} !default; $font-size-base: ${theme.typography.size.base} !default;
$font-size-lg: ${theme.typography.size.l} !default; $font-size-lg: ${theme.typography.size.lg} !default;
$font-size-md: ${theme.typography.size.m} !default; $font-size-md: ${theme.typography.size.md} !default;
$font-size-sm: ${theme.typography.size.s} !default; $font-size-sm: ${theme.typography.size.sm} !default;
$font-size-xs: ${theme.typography.size.xs} !default; $font-size-xs: ${theme.typography.size.xs} !default;
$line-height-base: ${theme.typography.lineHeight.l} !default; $line-height-base: ${theme.typography.lineHeight.lg} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold}; $font-weight-semi-bold: ${theme.typography.weight.semibold};
$font-size-h1: ${theme.typography.heading.h1} !default; $font-size-h1: ${theme.typography.heading.h1} !default;
...@@ -114,7 +114,7 @@ $font-size-h6: ${theme.typography.heading.h6} !default; ...@@ -114,7 +114,7 @@ $font-size-h6: ${theme.typography.heading.h6} !default;
$headings-margin-bottom: ($spacer / 2) !default; $headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-weight: ${theme.typography.weight.normal} !default; $headings-font-weight: ${theme.typography.weight.normal} !default;
$headings-line-height: ${theme.typography.lineHeight.s} !default; $headings-line-height: ${theme.typography.lineHeight.sm} !default;
$hr-border-width: $border-width !default; $hr-border-width: $border-width !default;
$dt-font-weight: bold !default; $dt-font-weight: bold !default;
......
packages/grafana-ui/src/themes/default.ts
...@@ -11,9 +11,9 @@ const theme: GrafanaThemeCommons = { ...@@ -11,9 +11,9 @@ const theme: GrafanaThemeCommons = {
root: '14px', root: '14px',
base: '13px', base: '13px',
xs: '10px', xs: '10px',
s: '12px', sm: '12px',
m: '14px', md: '14px',
l: '18px', lg: '18px',
}, },
heading: { heading: {
h1: '28px', h1: '28px',
...@@ -30,35 +30,35 @@ const theme: GrafanaThemeCommons = { ...@@ -30,35 +30,35 @@ const theme: GrafanaThemeCommons = {
}, },
lineHeight: { lineHeight: {
xs: 1, xs: 1,
s: 1.1, sm: 1.1,
m: 4 / 3, md: 4 / 3,
l: 1.5, lg: 1.5,
}, },
}, },
breakpoints: { breakpoints: {
xs: '0', xs: '0',
s: '544px', sm: '544px',
m: '768px', md: '768px',
l: '992px', lg: '992px',
xl: '1200px', xl: '1200px',
}, },
spacing: { spacing: {
d: '14px', d: '14px',
xs: '4px', xs: '4px',
s: '8px', sm: '8px',
m: '16px', md: '16px',
l: '24px', lg: '24px',
xl: '32px', xl: '32px',
gutter: '30px', gutter: '30px',
}, },
border: { border: {
radius: { radius: {
xs: '2px', xs: '2px',
s: '3px', sm: '3px',
m: '5px', md: '5px',
}, },
width: { width: {
s: '1px', sm: '1px',
}, },
}, },
}; };
......
packages/grafana-ui/src/types/theme.ts
...@@ -8,9 +8,9 @@ export interface GrafanaThemeCommons { ...@@ -8,9 +8,9 @@ export interface GrafanaThemeCommons {
// TODO: not sure if should be a part of theme // TODO: not sure if should be a part of theme
breakpoints: { breakpoints: {
xs: string; xs: string;
s: string; sm: string;
m: string; md: string;
l: string; lg: string;
xl: string; xl: string;
}; };
typography: { typography: {
...@@ -22,9 +22,9 @@ export interface GrafanaThemeCommons { ...@@ -22,9 +22,9 @@ export interface GrafanaThemeCommons {
root: string; root: string;
base: string; base: string;
xs: string; xs: string;
s: string; sm: string;
m: string; md: string;
l: string; lg: string;
}; };
weight: { weight: {
light: number; light: number;
...@@ -33,9 +33,9 @@ export interface GrafanaThemeCommons { ...@@ -33,9 +33,9 @@ export interface GrafanaThemeCommons {
}; };
lineHeight: { lineHeight: {
xs: number; //1 xs: number; //1
s: number; //1.1 sm: number; //1.1
m: number; // 4/3 md: number; // 4/3
l: number; // 1.5 lg: number; // 1.5
}; };
// TODO: Refactor to use size instead of custom defs // TODO: Refactor to use size instead of custom defs
heading: { heading: {
...@@ -50,20 +50,20 @@ export interface GrafanaThemeCommons { ...@@ -50,20 +50,20 @@ export interface GrafanaThemeCommons {
spacing: { spacing: {
d: string; d: string;
xs: string; xs: string;
s: string; sm: string;
m: string; md: string;
l: string; lg: string;
xl: string; xl: string;
gutter: string; gutter: string;
}; };
border: { border: {
radius: { radius: {
xs: string; xs: string;
s: string; sm: string;
m: string; md: string;
}; };
width: { width: {
s: string; sm: string;
}; };
}; };
} }
......
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