Skip to content

Commit

Permalink
Update toolkit from Paper v7.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
thomaskimura committed Feb 15, 2024
1 parent be41cd1 commit 6b62495
Show file tree
Hide file tree
Showing 21 changed files with 2,308 additions and 1,321 deletions.
8 changes: 4 additions & 4 deletions src/css/base/forms.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus color__bg-body;
}
}
Expand All @@ -40,7 +40,7 @@
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus;
}
}
Expand All @@ -52,7 +52,7 @@
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus;
}
}
Expand All @@ -61,7 +61,7 @@
&:hover {
@apply border__button--hover;
}
&:focus {
&:focus-visible {
@apply border__button--focus;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/css/base/typography.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
@apply underline opacity-50;
}

&:focus {
&:focus-visible {
@apply border--focus;
}
}
Expand Down
48 changes: 41 additions & 7 deletions src/css/utilities/borders.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,54 @@
/* ======= */
/* default borders */
/* - default border width */
.outline--width {
outline-width: var(--sizes__border-element-width);
outline-style: solid;
}
.border--width {
border-width: var(--sizes-border-width);
border-width: var(--sizes__border-element-width);
}
.border--t-width {
border-top-width: var(--sizes-border-width);
border-top-width: var(--sizes__border-element-width);
}
.border--r-width {
border-right-width: var(--sizes-border-width);
border-right-width: var(--sizes__border-element-width);
}
.border--b-width {
border-bottom-width: var(--sizes-border-width);
border-bottom-width: var(--sizes__border-element-width);
}
.border--l-width {
border-left-width: var(--sizes-border-width);
border-left-width: var(--sizes__border-element-width);
}
.border--button-width {
border-width: var(--sizes__border-button-width);
}
.border--t-button-width {
border-top-width: var(--sizes__border-button-width);
}
.border--r-button-width {
border-right-width: var(--sizes__border-button-width);
}
.border--b-button-width {
border-bottom-width: var(--sizes__border-button-width);
}
.border--l-button-width {
border-left-width: var(--sizes__border-button-width);
}
.border--input-width {
border-width: var(--sizes__border-input-width);
}
.border--t-input-width {
border-top-width: var(--sizes__border-input-width);
}
.border--r-input-width {
border-right-width: var(--sizes__border-input-width);
}
.border--b-input-width {
border-bottom-width: var(--sizes__border-input-width);
}
.border--l-input-width {
border-left-width: var(--sizes__border-input-width);
}
/* - default border raidus */
.border--radius {
Expand Down Expand Up @@ -54,7 +88,7 @@
/* ======= */
/* button borders */
.border__button {
@apply border--width;
@apply border--button-width;
}
.border__button--focus {
@apply border--focus;
Expand All @@ -68,7 +102,7 @@
/* ======= */
/* input borders */
.border__input {
@apply border--width color__border-divider-2;
@apply border--input-width color__border-divider-2;
}
.border__input--focus {
@apply border--focus color__border-divider-2;
Expand Down
8 changes: 4 additions & 4 deletions src/css/utilities/colors.css
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
/* - primary */
.color__button-primary {
background-color: var(--color-primary-button-background-light);
border-color: var(--color-primary-button-border-light);
border-color: var(--color__border-primary);
color: var(--color-primary-button-text-light);
* {
color: var(--color-primary-button-text-light);
Expand All @@ -162,7 +162,7 @@
/* - secondary */
.color__button-secondary {
background-color: var(--color-secondary-button-background-light);
border-color: var(--color-secondary-button-border-light);
border-color: var(--color__border-secondary);
color: var(--color-secondary-button-text-light);
* {
color: var(--color-secondary-button-text-light);
Expand All @@ -172,7 +172,7 @@
/* - tertiary */
.color__button-tertiary {
background-color: var(--color-tertiary-button-background-light);
border-color: var(--color-tertiary-button-border-light);
border-color: var(--color__border-tertiary);
color: var(--color-tertiary-button-text-light);
* {
color: var(--color-tertiary-button-text-light);
Expand All @@ -192,7 +192,7 @@
/* - plain */
.color__button-plain {
background-color: var(--color-plain-button-background-light);
border-color: var(--color-plain-button-border-light);
border-color: var(--color__border-plain);
color: var(--color-plain-button-text-light);
* {
color: var(--color-plain-button-text-light);
Expand Down
70 changes: 70 additions & 0 deletions src/prompts/AddSummaryComment.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
Please update the top of this Shopify liquid file to include a comment that explains this code for other developers. This comment should include 1) a summary of the file 2) all global liquid variables that start with `{{ settings.`. These variables should include there type and a short description 3) Recomendations on how to best use this file 4) if the file is a snippet we'll want to also include a list of arguments that are accepted 5) if the file is a snippet we'll want to include a sample usage example. If the file is a section file please skip over the Accepts and Usage comments.

Below is an example of this

```
<!-- snippets/component__content-item.liquid -->
{% comment %}
Thumbnail for simple content in a product or collection grid.
Accepts:
- heading: {string} Set content for heading text.
- content: {string} Set content for body text.
- button_label: {string} Set content for button text.
- url: {string} Set URL for this block.
- image: {object} Liquid object for image values.
- image_background: {object} Liquid object for background image values.
- video: {object} Liquid object for video values.
- enable_autoplay: {boolean} Indicates if video should autoplay.
- enable_mute_toggle: {boolean} Indicates if video should include mute buttons.
- enable_loop: {boolean} Indicates if video should loop.
- color_scheme: {string} Class string to set color.
- color_border: {string} Class string to set border color.
- color_text: {string} Class string to set text color.
- color_button: {string} Class string to set button color.
- enable_gradient: {boolean} Indicates if content should use a gradient.
- spacing_top: {integer} Set top padding within block.
- spacing_bottom: {integer} Set bottom padding within block.
- enable_padding: {boolean} Indicates if content should use padding.
- layout_col_span_desktop: {string} Class string to set column span on desktop.
- layout_col_span_mobile: {string} Class string to set column span on mobile.
- layout_row_span_desktop: {string} Class string to set row span on desktop.
- layout_row_span_mobile: {string} Class string to set row span on mobile.
- layout_y_alignment: {string} Class string to set vertical aligment.
- layout_x_alignment: {string} Class string to set horizontal aligment (left, center, right).
Globals:
- settings.layout_horizontal: {string} Class string to set horizontal margin.
Usage:
{% render 'component__content-item',
heading: block.settings.heading,
content: block.settings.content,
button_label: block.settings.button_label,
url: block.settings.url,
image: block.settings.image,
image_background: block.settings.image_background,
video: block.settings.video,
enable_autoplay: block.settings.enable_autoplay,
enable_mute_toggle: block.settings.enable_mute_toggle,
enable_loop: block.settings.enable_loop,
color_scheme: block.settings.color_scheme,
color_border: block.settings.color_border,
color_text: block.settings.color_text,
color_button: block.settings.color_button,
enable_gradient: block.settings.enable_gradient,
spacing_top: block.settings.spacing_top,
spacing_bottom: block.settings.spacing_bottom,
enable_padding: block.settings.enable_padding,
layout_col_span_desktop: 'md:col-span-2',
layout_col_span_mobile: 'col-span-2' ,
layout_row_span_desktop: 'md:row-span-2',
layout_row_span_mobile: 'row-span-2',
layout_y_alignment: block.settings.layout_y_alignment,
layout_x_alignment: block.settings.layout_x_alignment
%}
Recommendations:
- Use this snippet to display promotional content.
{% endcomment %}
```
7 changes: 7 additions & 0 deletions src/prompts/CheckForMatchingTranslations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Please review this Shopify liquid code and ensure all translation values are pulling from the correct places.

- Within the {% schema %} we want to use translations for the name, label, info and content values. This should look something like this `"t:sections.all.colors.settings.color_border.label"`
- All translations should start with `"t:sections.all.` OR `"t:sections.all.[FILE_NAME]`
- [FILE_NAME] is replace with the file name. For example within `content-slider.liquid` the correct translation should start with either `"t:sections.all.` OR `"t:sections.content_slider.`

Please share a list of all lines that are not following this standard. You do not need to explain what the lines should be replaced with in your output.
8 changes: 8 additions & 0 deletions src/prompts/CheckForMissingTranslations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Please highlight any missing translations in this Shopify liquid code. This file is being used for a Shopify theme. All text that is displayed within the theme should pull from translated values.

- Within the {% schema %} we want to use translations for the name, label, info and content values. This should look something like this `"t:sections.all.colors.settings.color_border.label"`
- Within the code any hardcoded text should be replaced with a translation liquid variable like `{{ 'products.general.options' | t }}`
- Block and section liquid variables are valid and don't need to be replaced. For example this `{{ block.settings.heading }}` and this `{{ section.settings.heading }}` are both valid

Please share a list of all lines that are not following this standard. You do not need to explain what the lines should be replaced with in your output.

Loading

0 comments on commit 6b62495

Please sign in to comment.