Skip to content

N
nexpie-grafana-theme
Commit e632309a by ijin08
Options

removed unused and very specific variables, also variables with same value as general variable

parent f13263eb
Showing with 42 additions and 69 deletions
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
} }
.thresholds-row-input-inner-value > input { .thresholds-row-input-inner-value > input {
height: $gf-form-input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
width: 150px; width: 150px;
border-top: 1px solid $input-label-border-color; border-top: 1px solid $input-label-border-color;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $gf-form-input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
width: 42px; width: 42px;
background-color: $input-label-bg; background-color: $input-label-bg;
......
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
...@@ -52,7 +52,6 @@ $spacers: ( ...@@ -52,7 +52,6 @@ $spacers: (
), ),
), ),
) !default; ) !default;
$border-width: ${theme.border.width.sm} !default;
// Grid breakpoints // Grid breakpoints
// //
...@@ -83,16 +82,13 @@ $container-max-widths: ( ...@@ -83,16 +82,13 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters. // Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 30px !default; $grid-gutter-width: ${theme.spacing.gutter} !default;
$enable-flex: true;
// Typography // Typography
// ------------------------- // -------------------------
$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif};
$font-family-monospace: ${theme.typography.fontFamily.monospace}; $font-family-monospace: ${theme.typography.fontFamily.monospace};
$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;
...@@ -103,7 +99,9 @@ $font-size-sm: ${theme.typography.size.sm} !default; ...@@ -103,7 +99,9 @@ $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.lg} !default; $line-height-base: ${theme.typography.lineHeight.lg} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold};
$font-weight-regular: ${theme.typography.weight.regular} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold} !default;
$font-size-h1: ${theme.typography.heading.h1} !default; $font-size-h1: ${theme.typography.heading.h1} !default;
$font-size-h2: ${theme.typography.heading.h2} !default; $font-size-h2: ${theme.typography.heading.h2} !default;
...@@ -113,22 +111,17 @@ $font-size-h5: ${theme.typography.heading.h5} !default; ...@@ -113,22 +111,17 @@ $font-size-h5: ${theme.typography.heading.h5} !default;
$font-size-h6: ${theme.typography.heading.h6} !default; $font-size-h6: ${theme.typography.heading.h6} !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-line-height: ${theme.typography.lineHeight.sm} !default; $headings-line-height: ${theme.typography.lineHeight.sm} !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
// Components // Components
// //
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default; $border-width: ${theme.border.width.sm} !default;
$line-height-sm: 1.5 !default;
$border-radius: 3px !default; $border-radius: ${theme.border.radius.md} !default;
$border-radius-lg: 5px !default; $border-radius-lg: ${theme.border.radius.lg}!default;
$border-radius-sm: 2px !default; $border-radius-sm: ${theme.border.radius.sm} !default;
// Page // Page
...@@ -151,22 +144,17 @@ $input-padding-x: 10px !default; ...@@ -151,22 +144,17 @@ $input-padding-x: 10px !default;
$input-padding-y: 8px !default; $input-padding-y: 8px !default;
$input-line-height: 18px !default; $input-line-height: 18px !default;
$input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
$label-border-radius: $border-radius 0 0 $border-radius !default; $label-border-radius: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default; $input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default; $input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
// Form validation icons // Form validation icons
...@@ -203,7 +191,6 @@ $btn-padding-y-lg: 11px !default; ...@@ -203,7 +191,6 @@ $btn-padding-y-lg: 11px !default;
$btn-padding-x-xl: 21px !default; $btn-padding-x-xl: 21px !default;
$btn-padding-y-xl: 11px !default; $btn-padding-y-xl: 11px !default;
$btn-border-radius: 2px;
$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
......
packages/grafana-ui/src/themes/default.ts
...@@ -25,7 +25,7 @@ const theme: GrafanaThemeCommons = { ...@@ -25,7 +25,7 @@ const theme: GrafanaThemeCommons = {
}, },
weight: { weight: {
light: 300, light: 300,
normal: 400, regular: 400,
semibold: 500, semibold: 500,
}, },
lineHeight: { lineHeight: {
...@@ -54,9 +54,9 @@ const theme: GrafanaThemeCommons = { ...@@ -54,9 +54,9 @@ const theme: GrafanaThemeCommons = {
}, },
border: { border: {
radius: { radius: {
xs: '2px', sm: '2px',
sm: '3px', md: '3px',
md: '5px', lg: '5px',
}, },
width: { width: {
sm: '1px', sm: '1px',
......
packages/grafana-ui/src/types/theme.ts
...@@ -28,7 +28,7 @@ export interface GrafanaThemeCommons { ...@@ -28,7 +28,7 @@ export interface GrafanaThemeCommons {
}; };
weight: { weight: {
light: number; light: number;
normal: number; regular: number;
semibold: number; semibold: number;
}; };
lineHeight: { lineHeight: {
...@@ -59,9 +59,9 @@ export interface GrafanaThemeCommons { ...@@ -59,9 +59,9 @@ export interface GrafanaThemeCommons {
}; };
border: { border: {
radius: { radius: {
xs: string;
sm: string; sm: string;
md: string; md: string;
lg: string;
}; };
width: { width: {
sm: string; sm: string;
......
public/sass/_variables.generated.scss
...@@ -55,7 +55,6 @@ $spacers: ( ...@@ -55,7 +55,6 @@ $spacers: (
), ),
), ),
) !default; ) !default;
$border-width: 1px !default;
// Grid breakpoints // Grid breakpoints
// //
...@@ -88,14 +87,11 @@ $container-max-widths: ( ...@@ -88,14 +87,11 @@ $container-max-widths: (
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 30px !default; $grid-gutter-width: 30px !default;
$enable-flex: true;
// Typography // Typography
// ------------------------- // -------------------------
$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default; $font-size-root: 14px !default;
$font-size-base: 13px !default; $font-size-base: 13px !default;
...@@ -106,7 +102,9 @@ $font-size-sm: 12px !default; ...@@ -106,7 +102,9 @@ $font-size-sm: 12px !default;
$font-size-xs: 10px !default; $font-size-xs: 10px !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 500;
$font-weight-regular: 400 !default;
$font-weight-semi-bold: 500 !default;
$font-size-h1: 28px !default; $font-size-h1: 28px !default;
$font-size-h2: 24px !default; $font-size-h2: 24px !default;
...@@ -116,18 +114,13 @@ $font-size-h5: 16px !default; ...@@ -116,18 +114,13 @@ $font-size-h5: 16px !default;
$font-size-h6: 14px !default; $font-size-h6: 14px !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default; $headings-line-height: 1.1 !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
// Components // Components
// //
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default; $border-width: 1px !default;
$line-height-sm: 1.5 !default;
$border-radius: 3px !default; $border-radius: 3px !default;
$border-radius-lg: 5px !default; $border-radius-lg: 5px !default;
...@@ -154,22 +147,17 @@ $input-padding-x: 10px !default; ...@@ -154,22 +147,17 @@ $input-padding-x: 10px !default;
$input-padding-y: 8px !default; $input-padding-y: 8px !default;
$input-line-height: 18px !default; $input-line-height: 18px !default;
$input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
$label-border-radius: $border-radius 0 0 $border-radius !default; $label-border-radius: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default; $input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default; $input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
// Form validation icons // Form validation icons
...@@ -206,8 +194,6 @@ $btn-padding-y-lg: 11px !default; ...@@ -206,8 +194,6 @@ $btn-padding-y-lg: 11px !default;
$btn-padding-x-xl: 21px !default; $btn-padding-x-xl: 21px !default;
$btn-padding-y-xl: 11px !default; $btn-padding-y-xl: 11px !default;
$btn-border-radius: 2px;
$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
// sidemenu // sidemenu
......
public/sass/base/_forms.scss
...@@ -37,7 +37,7 @@ input, ...@@ -37,7 +37,7 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) font-family: $font-family-sans-serif; // And only set font-family here for those that need it (note the missing label element)
} }
// Identify controls by their labels // Identify controls by their labels
......
public/sass/base/_reboot.scss
...@@ -70,7 +70,7 @@ html { ...@@ -70,7 +70,7 @@ html {
body { body {
// Make the `body` use the `font-size-root` // Make the `body` use the `font-size-root`
font-family: $font-family-base; font-family: $font-family-sans-serif;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height-base; line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text // Go easy on the eyes and use something other than `#000` for text
...@@ -145,7 +145,7 @@ ul ol { ...@@ -145,7 +145,7 @@ ul ol {
} }
dt { dt {
font-weight: $dt-font-weight; font-weight: $font-weight-semi-bold;
} }
dd { dd {
......
public/sass/base/_type.scss
...@@ -111,7 +111,7 @@ h6, ...@@ -111,7 +111,7 @@ h6,
.h6 { .h6 {
margin-bottom: $space-sm; margin-bottom: $space-sm;
font-family: $headings-font-family; font-family: $headings-font-family;
font-weight: $headings-font-weight; font-weight: $font-weight-regular;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: $headings-color;
} }
...@@ -149,7 +149,7 @@ hr { ...@@ -149,7 +149,7 @@ hr {
margin-top: $spacer-y; margin-top: $spacer-y;
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
border: 0; border: 0;
border-top: $hr-border-width solid $hr-border-color; border-top: $border-width solid $hr-border-color;
} }
// //
......
public/sass/components/_buttons.scss
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
cursor: pointer; cursor: pointer;
border: none; border: none;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $border-radius-sm);
&, &,
&:active, &:active,
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
// -------------------------------------------------- // --------------------------------------------------
// XLarge // XLarge
.btn-xlarge { .btn-xlarge {
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $btn-border-radius); @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $border-radius-sm);
font-weight: normal; font-weight: normal;
padding-bottom: $btn-padding-y-xl - 3; padding-bottom: $btn-padding-y-xl - 3;
.gicon { .gicon {
...@@ -64,16 +64,16 @@ ...@@ -64,16 +64,16 @@
// Large // Large
.btn-large { .btn-large {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius); @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $border-radius-sm);
font-weight: normal; font-weight: normal;
} }
.btn-small { .btn-small {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
} }
.btn-mini { .btn-mini {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $border-radius-sm);
} }
.btn-link { .btn-link {
......
public/sass/components/_code_editor.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
min-height: 3.6rem; // Include space for horizontal scrollbar min-height: 3.6rem; // Include space for horizontal scrollbar
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
border: $input-btn-border-width solid $input-border-color; border: $border-width solid $input-border-color;
} }
.ace_content { .ace_content {
......
public/sass/components/_gf-form.scss
...@@ -105,9 +105,9 @@ $input-border: 1px solid $input-border-color; ...@@ -105,9 +105,9 @@ $input-border: 1px solid $input-border-color;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block; display: block;
height: $gf-form-input-height; height: $input-height;
border: $input-btn-border-width solid $input-label-border-color; border: $border-width solid $input-label-border-color;
border-right: none; border-right: none;
border-radius: $label-border-radius; border-radius: $label-border-radius;
...@@ -127,7 +127,7 @@ $input-border: 1px solid $input-border-color; ...@@ -127,7 +127,7 @@ $input-border: 1px solid $input-border-color;
} }
&--btn { &--btn {
border-right: $input-btn-border-width solid $input-label-border-color; border-right: $border-width solid $input-label-border-color;
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
...@@ -154,7 +154,7 @@ $input-border: 1px solid $input-border-color; ...@@ -154,7 +154,7 @@ $input-border: 1px solid $input-border-color;
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
margin-right: $space-xs; margin-right: $space-xs;
border: $input-btn-border-width solid transparent; border: $border-width solid transparent;
border-left: none; border-left: none;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
} }
...@@ -166,7 +166,7 @@ $input-border: 1px solid $input-border-color; ...@@ -166,7 +166,7 @@ $input-border: 1px solid $input-border-color;
.gf-form-input { .gf-form-input {
display: block; display: block;
width: 100%; width: 100%;
height: $gf-form-input-height; height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
font-size: $font-size-md; font-size: $font-size-md;
line-height: $input-line-height; line-height: $input-line-height;
......
public/sass/components/_panel_gettingstarted.scss
...@@ -117,7 +117,7 @@ $path-position: $marker-size-half - ($path-height / 2); ...@@ -117,7 +117,7 @@ $path-position: $marker-size-half - ($path-height / 2);
} }
.progress-step-cta { .progress-step-cta {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
display: none; display: none;
} }
......
public/sass/components/_slate_editor.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
min-height: $gf-form-input-height; min-height: $input-height;
width: 100%; width: 100%;
cursor: text; cursor: text;
line-height: $line-height-base; line-height: $line-height-base;
......
public/sass/components/_submenu.scss
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
border-radius: $input-border-radius; border-radius: $input-border-radius;
display: inline-block; display: inline-block;
color: $text-color; color: $text-color;
height: $gf-form-input-height; height: $input-height;
.label-tag { .label-tag {
margin: 0 5px; margin: 0 5px;
......
public/sass/components/_switch.scss
...@@ -26,7 +26,7 @@ gf-form-switch[disabled] { ...@@ -26,7 +26,7 @@ gf-form-switch[disabled] {
display: flex; display: flex;
position: relative; position: relative;
width: 60px; width: 60px;
height: $gf-form-input-height; height: $input-height;
background: $switch-bg; background: $switch-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-left: none; border-left: none;
...@@ -82,7 +82,7 @@ input:checked + .gf-form-switch__slider::before { ...@@ -82,7 +82,7 @@ input:checked + .gf-form-switch__slider::before {
position: relative; position: relative;
display: flex; display: flex;
width: 50px; width: 50px;
height: $gf-form-input-height; height: $input-height;
background: $switch-bg; background: $switch-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-left: none; border-left: none;
......
public/sass/components/_toolbar.scss
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
height: $gf-form-input-height; height: $input-height;
border: $input-border; border: $input-border;
border-radius: $input-border-radius; border-radius: $input-border-radius;
display: flex; display: flex;
......
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