From 1fb5caa4fdffe777ee9febc69b3589054619b7d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Pereira?= Date: Fri, 21 Jan 2022 11:26:36 -0600 Subject: [PATCH 01/19] Add base support for versioning of imgpkg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: João Pereira --- site/config.yaml | 6 +- site/content/imgpkg/docs/latest/_index.md | 2 +- ...-latest-toc.yml => imgpkg-v0-24-0-toc.yml} | 0 site/data/imgpkg/docs/toc-mapping.yml | 3 +- site/themes/carvel/assets/scss/_alerts.scss | 50 +++++ .../carvel/assets/scss/_components.scss | 5 + .../themes/carvel/assets/scss/_functions.scss | 190 ++++++++++++++++++ site/themes/carvel/assets/scss/_mixins.scss | 15 +- .../themes/carvel/assets/scss/_variables.scss | 86 ++++++++ .../carvel/assets/scss/mixins/_alert.scss | 13 ++ .../assets/scss/mixins/_border-radius.scss | 76 +++++++ .../carvel/assets/scss/mixins/_gradients.scss | 45 +++++ site/themes/carvel/assets/scss/site.scss | 6 +- .../carvel/layouts/docs/_version-warning.html | 11 +- .../themes/carvel/layouts/docs/_versions.html | 17 +- 15 files changed, 511 insertions(+), 14 deletions(-) rename site/data/imgpkg/docs/{imgpkg-latest-toc.yml => imgpkg-v0-24-0-toc.yml} (100%) create mode 100644 site/themes/carvel/assets/scss/_alerts.scss create mode 100644 site/themes/carvel/assets/scss/_functions.scss create mode 100644 site/themes/carvel/assets/scss/mixins/_alert.scss create mode 100644 site/themes/carvel/assets/scss/mixins/_border-radius.scss create mode 100644 site/themes/carvel/assets/scss/mixins/_gradients.scss diff --git a/site/config.yaml b/site/config.yaml index c84d391a7..376358d22 100644 --- a/site/config.yaml +++ b/site/config.yaml @@ -60,10 +60,10 @@ params: search_index_name: carvel search_api_key: 582b1408d7a3fe145c0f84f48ca03755 search_tag: imgpkg - versioning: false - version_latest: latest + versioning: true + version_latest: v0.24.0 versions: - - latest + - v0.24.0 kapp-controller: name: kapp-controller short_name: kc diff --git a/site/content/imgpkg/docs/latest/_index.md b/site/content/imgpkg/docs/latest/_index.md index c39a97e8d..82be20442 100644 --- a/site/content/imgpkg/docs/latest/_index.md +++ b/site/content/imgpkg/docs/latest/_index.md @@ -2,7 +2,7 @@ title: "About imgpkg" toc: "false" cascade: - version: latest + version: v0.24.0 toc: "true" type: docs layout: docs diff --git a/site/data/imgpkg/docs/imgpkg-latest-toc.yml b/site/data/imgpkg/docs/imgpkg-v0-24-0-toc.yml similarity index 100% rename from site/data/imgpkg/docs/imgpkg-latest-toc.yml rename to site/data/imgpkg/docs/imgpkg-v0-24-0-toc.yml diff --git a/site/data/imgpkg/docs/toc-mapping.yml b/site/data/imgpkg/docs/toc-mapping.yml index d7ee5cf81..bccb38d06 100644 --- a/site/data/imgpkg/docs/toc-mapping.yml +++ b/site/data/imgpkg/docs/toc-mapping.yml @@ -2,5 +2,4 @@ # (TOC). You'll want to use this after any revamps to information architecture, to ensure # that the navigation for older versions still work. -latest: imgpkg-latest-toc -# v0.3.0: imgpkg-v0-3-0-toc +v0.24.0: imgpkg-v0-24-0-toc diff --git a/site/themes/carvel/assets/scss/_alerts.scss b/site/themes/carvel/assets/scss/_alerts.scss new file mode 100644 index 000000000..6da04818d --- /dev/null +++ b/site/themes/carvel/assets/scss/_alerts.scss @@ -0,0 +1,50 @@ +// +// Base styles +// +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: $close-font-size + $alert-padding-x * 2; + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + z-index: 2; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} diff --git a/site/themes/carvel/assets/scss/_components.scss b/site/themes/carvel/assets/scss/_components.scss index 9667a06ac..df8d9743f 100644 --- a/site/themes/carvel/assets/scss/_components.scss +++ b/site/themes/carvel/assets/scss/_components.scss @@ -387,6 +387,7 @@ } } .dropdown-menu { + z-index: 1; position: absolute; border: 1px solid $grey; border-radius: 5px; @@ -403,6 +404,10 @@ &.dropdown-menu-visible { display: block; } + + .dropdown-item.deprecated { + color: $grey; + } } .form-control { display: block; diff --git a/site/themes/carvel/assets/scss/_functions.scss b/site/themes/carvel/assets/scss/_functions.scss new file mode 100644 index 000000000..13d9de0c1 --- /dev/null +++ b/site/themes/carvel/assets/scss/_functions.scss @@ -0,0 +1,190 @@ +// Bootstrap functions +// +// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. + +// Ascending +// Used to evaluate Sass maps like our grid breakpoints. +@mixin _assert-ascending($map, $map-name) { + $prev-key: null; + $prev-num: null; + @each $key, $num in $map { + @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { + @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } + $prev-key: $key; + $prev-num: $num; + } +} + +// Starts at zero +// Used to ensure the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { + @if length($map) > 0 { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; + } + } +} + +// Replace `$search` with `$replace` in `$string` +// Used on our SVG icon backgrounds for custom forms. +// +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +// See https://codepen.io/kevinweber/pen/dXWoRw +// +// Requires the use of quotes around data URIs. + +@function escape-svg($string) { + @if str-index($string, "data:image/svg+xml") { + @each $char, $encoded in $escaped-characters { + // Do not escape the url brackets + @if str-index($string, "url(") == 1 { + $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); + } @else { + $string: str-replace($string, $char, $encoded); + } + } + } + + @return $string; +} + +// Color contrast +@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { + $r: red($color); + $g: green($color); + $b: blue($color); + + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001; + + @if ($yiq >= $yiq-contrasted-threshold) { + @return $dark; + } @else { + @return $light; + } +} + +// Retrieve color Sass maps +@function color($key: "blue") { + @return map-get($colors, $key); +} + +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} + +@function gray($key: "100") { + @return map-get($grays, $key); +} + +// Request a theme color level +@function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, $black, $white); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} + +// Return valid calc +@function add($value1, $value2, $return-calc: true) { + @if $value1 == null { + @return $value2; + } + + @if $value2 == null { + @return $value1; + } + + @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { + @return $value1 + $value2; + } + + @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); +} + +@function subtract($value1, $value2, $return-calc: true) { + @if $value1 == null and $value2 == null { + @return null; + } + + @if $value1 == null { + @return -$value2; + } + + @if $value2 == null { + @return $value1; + } + + @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { + @return $value1 - $value2; + } + + @if type-of($value2) != number { + $value2: unquote("(") + $value2 + unquote(")"); + } + + @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); +} + +@function divide($dividend, $divisor, $precision: 10) { + $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); + $dividend: abs($dividend); + $divisor: abs($divisor); + @if $dividend == 0 { + @return 0; + } + @if $divisor == 0 { + @error "Cannot divide by 0"; + } + $remainder: $dividend; + $result: 0; + $factor: 10; + @while ($remainder > 0 and $precision >= 0) { + $quotient: 0; + @while ($remainder >= $divisor) { + $remainder: $remainder - $divisor; + $quotient: $quotient + 1; + } + $result: $result * 10 + $quotient; + $factor: $factor * .1; + $remainder: $remainder * 10; + $precision: $precision - 1; + @if ($precision < 0 and $remainder >= $divisor * 5) { + $result: $result + 1; + } + } + $result: $result * $factor * $sign; + $dividend-unit: unit($dividend); + $divisor-unit: unit($divisor); + $unit-map: ( + "px": 1px, + "rem": 1rem, + "em": 1em, + "%": 1% + ); + @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { + $result: $result * map-get($unit-map, $dividend-unit); + } + @return $result; +} diff --git a/site/themes/carvel/assets/scss/_mixins.scss b/site/themes/carvel/assets/scss/_mixins.scss index 49380a36e..dd84ff441 100644 --- a/site/themes/carvel/assets/scss/_mixins.scss +++ b/site/themes/carvel/assets/scss/_mixins.scss @@ -33,4 +33,17 @@ &:after { clear: both; } -} \ No newline at end of file +} + +// Toggles +// +// Used in conjunction with global variables to enable certain theme features. + +// Components +@import "mixins/alert"; + +// Skins +@import "mixins/gradients"; +@import "mixins/border-radius"; + +// Layout diff --git a/site/themes/carvel/assets/scss/_variables.scss b/site/themes/carvel/assets/scss/_variables.scss index 380173106..e258b5473 100644 --- a/site/themes/carvel/assets/scss/_variables.scss +++ b/site/themes/carvel/assets/scss/_variables.scss @@ -7,3 +7,89 @@ $grey: #777777; $lightgrey: #F2F2F2; $green: #78BE20; $teal: #00C0D5; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$cyan: #0dcaf0 !default; +$yellow: #ffc107 !default; + +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$light: $gray-100 !default; +$dark: $gray-900 !default; + +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "light": $light, + "dark": $dark +) !default; + +// Set a specific jump point for requesting color jumps +$theme-color-interval: 8% !default; + +$variable-prefix: bs- !default; +$spacer: 1rem !default; +// scss-docs-start border-radius-variables +$border-radius: .25rem !default; +$border-radius-sm: .2rem !default; +$border-radius-lg: .3rem !default; +$border-radius-pill: 50rem !default; +// scss-docs-end border-radius-variables + +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; + +$font-weight-base: $font-weight-normal !default; +$border-width: 1px !default; +$border-widths: ( + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +) !default; +$stretched-link-z-index: 1 !default; +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 4.5 !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; +$close-font-size: $font-size-base * 1.5 !default; + + +$enable-rounded: true !default; +$enable-gradients: false !default; + +// Alerts +// +// Define alert colors, border radius, and padding. + +// scss-docs-start alert-variables +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-scale: -80% !default; +$alert-border-scale: -70% !default; +$alert-color-scale: 40% !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side diff --git a/site/themes/carvel/assets/scss/mixins/_alert.scss b/site/themes/carvel/assets/scss/mixins/_alert.scss new file mode 100644 index 000000000..c74696430 --- /dev/null +++ b/site/themes/carvel/assets/scss/mixins/_alert.scss @@ -0,0 +1,13 @@ +@mixin alert-variant($background, $border, $color) { + color: $color; +@include gradient-bg($background); + border-color: $border; + + hr { + border-top-color: darken($border, 5%); + } + + .alert-link { + color: darken($color, 10%); + } +} diff --git a/site/themes/carvel/assets/scss/mixins/_border-radius.scss b/site/themes/carvel/assets/scss/mixins/_border-radius.scss new file mode 100644 index 000000000..4fad91d67 --- /dev/null +++ b/site/themes/carvel/assets/scss/mixins/_border-radius.scss @@ -0,0 +1,76 @@ +// stylelint-disable property-disallowed-list +// Single side border-radius + +// Helper function to replace negative values with 0 +@function valid-radius($radius) { + $return: (); + @each $value in $radius { + @if type-of($value) == number { + $return: append($return, max($value, 0)); + } @else { + $return: append($return, $value); + } + } + @return $return; +} + +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { + @if $enable-rounded { + border-radius: valid-radius($radius); + } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } +} + +@mixin border-top-radius($radius) { + @if $enable-rounded { + border-top-left-radius: valid-radius($radius); + border-top-right-radius: valid-radius($radius); + } +} + +@mixin border-right-radius($radius) { + @if $enable-rounded { + border-top-right-radius: valid-radius($radius); + border-bottom-right-radius: valid-radius($radius); + } +} + +@mixin border-bottom-radius($radius) { + @if $enable-rounded { + border-bottom-right-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); + } +} + +@mixin border-left-radius($radius) { + @if $enable-rounded { + border-top-left-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); + } +} + +@mixin border-top-left-radius($radius) { + @if $enable-rounded { + border-top-left-radius: valid-radius($radius); + } +} + +@mixin border-top-right-radius($radius) { + @if $enable-rounded { + border-top-right-radius: valid-radius($radius); + } +} + +@mixin border-bottom-right-radius($radius) { + @if $enable-rounded { + border-bottom-right-radius: valid-radius($radius); + } +} + +@mixin border-bottom-left-radius($radius) { + @if $enable-rounded { + border-bottom-left-radius: valid-radius($radius); + } +} diff --git a/site/themes/carvel/assets/scss/mixins/_gradients.scss b/site/themes/carvel/assets/scss/mixins/_gradients.scss new file mode 100644 index 000000000..39480bb20 --- /dev/null +++ b/site/themes/carvel/assets/scss/mixins/_gradients.scss @@ -0,0 +1,45 @@ +// Gradients + +@mixin gradient-bg($color) { +@if $enable-gradients { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; +} @else { + background-color: $color; +} +} + +// Horizontal gradient, from left to right +// +// Creates two color stops, start and end, by specifying a color and position for each color stop. +@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { + background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); + background-repeat: repeat-x; +} + +// Vertical gradient, from top to bottom +// +// Creates two color stops, start and end, by specifying a color and position for each color stop. +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { + background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); + background-repeat: repeat-x; +} + +@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { + background-image: linear-gradient($deg, $start-color, $end-color); + background-repeat: repeat-x; +} +@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { + background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; +} +@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { + background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; +} +@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { + background-image: radial-gradient(circle, $inner-color, $outer-color); + background-repeat: no-repeat; +} +@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { + background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); +} diff --git a/site/themes/carvel/assets/scss/site.scss b/site/themes/carvel/assets/scss/site.scss index 4ce7ebdc6..8da506c12 100644 --- a/site/themes/carvel/assets/scss/site.scss +++ b/site/themes/carvel/assets/scss/site.scss @@ -1,6 +1,8 @@ +@import 'variables'; +@import 'functions'; +@import 'mixins'; +@import 'alerts'; @import 'header'; @import 'footer'; @import 'base'; -@import 'variables'; @import 'components'; -@import 'mixins'; \ No newline at end of file diff --git a/site/themes/carvel/layouts/docs/_version-warning.html b/site/themes/carvel/layouts/docs/_version-warning.html index afe82aec7..6b932ceee 100644 --- a/site/themes/carvel/layouts/docs/_version-warning.html +++ b/site/themes/carvel/layouts/docs/_version-warning.html @@ -1,11 +1,20 @@ {{ $subprojectInfo := (index .Site.Params .Section) }} {{ if $subprojectInfo }} {{ if ne .CurrentSection.Params.version $subprojectInfo.version_latest }} + {{ if ne .CurrentSection.Params.version "develop" }} + {{ else }} + + {{ end }} {{ end }} {{ end }} diff --git a/site/themes/carvel/layouts/docs/_versions.html b/site/themes/carvel/layouts/docs/_versions.html index 7e1e3e8fe..a3dad90dd 100644 --- a/site/themes/carvel/layouts/docs/_versions.html +++ b/site/themes/carvel/layouts/docs/_versions.html @@ -1,19 +1,28 @@ {{ $subprojectInfo := (index .Site.Params .Section) }}